vue 学习笔记

Vue / 2020-02-19

vue基本格式

<html>
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                msg:"123",
                msg2:"123",
            },
            methods:{
                move1(){
                    
                },
            }
            
        })
    </script>
</body>
</html>

script引入vue

指令

  • v-cloak:防止页面显示插值加载前内容
  • v-text:显示文本内容，不会转义heml
  • v-html：转义html后显示
  • v-bind: 简写 ： ，属性修饰符
        <img class="image" v-bind:src="image + '.png'">
  • v-on：简写：@ ，事件修饰符
        <p @click="last">上一张</p>
        <p @click="next">下一张</p>
  • v-model：双向数据绑定
        <input type="text" @keyup.enter="enter1" v-model="message">
  • v-for：循环
<ul>
            <li v-for="(item,index) in list">{{index}},{{item}}</li>
        </ul>
data:{
                list:[1,2,3,4,5]
            },
  • v-if,v-show:v-if每次都会重新创建删除元素，v-show不会创建删除，只是控制显示
     <input type="button" value="flag" @click="flag=!flag">
        <p v-show="flag" >v-show</p>

   data:{
                list:[1,2,3,4,5],
                list1:[
                    {id:1,name:'jjboy'},
                    {id:2,name:'jjj'}
                ],
                flag:true,
            },
  • 事件修饰符

截屏2020-02-19上午11.42.28-fd298023f5144f6cb67f5c7a4d3cf742

实例

  • 跑马灯
<div id="app">
        <input type="button" value="开始" @click="start">
        <input type="button" value="停止" @click="stop">
        <h1>
            {{msg}}
        </h1>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"跑马灯效果展示",
            },
            methods:{
                start(){
                    setInterval(() => {
                        this.msg = this.msg.substring(1)+this.msg.substring(0,1);

                    }, '400');

                },
                stop(){

                },
            }
        })
    </script>

全局过滤器

  • 只能用在插值和v-bind中
 <script>
        Vue.filter('msgformat',function(msg , arg){
            return msg.replace(/木兰/g,arg)
        })
    </script>
    <div id="app">
        
        <h1>
            {{ msg|msgformat("方法") }}
        </h1>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg : "唧唧复唧唧，木兰当户织1"
            }
        
        })

    </script>

  • filter一定要定义在使用之前，如果把filter的定义放在使用之后会没有效果。

  • String字符串填充方法：padstart（2，"0") : 不足两位的前面填0
    padend： 后面填

  • 键盘事件---回车

  <div id="app">
       <input type="text" @keyup.enter="add">

   </div>
   <script>
       var app = new Vue({
           el:"#app",
           data:{
               msg : "唧唧复唧唧，木兰当户织1"

           },
           methods:{
               add(){
                   alert(this.msg)
                   alert("lsdkf")
               }
           }

       })
       

   </script>
  • 按键修饰符

截屏2020-02-19下午12.45.09-4d1f41bc52f842a78198159f7c850ac1

钩子函数自定义指令

实现聚焦

Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
  • 之后就可以使用v-focus实现聚焦
  • 自定义指令时名字为focus，但是使用时要用v-focus

自定义指令方法

截屏2020-02-19下午12.51.44-67b12ab4a6ab4bf2a5a7feacfc9e6eab

实现颜色改变

        Vue.directive('color',{
            bind:function(el){
                el.style.color='red';
            }
        })
  • 使用
        <input type="text" @keyup.enter="add" v-focus v-color>

增加参数传值

截屏2020-02-19下午1.04.38-1761e4bc05674c20a3aad61b767a29fd

<div id="app">
        <input type="text" @keyup.enter="add" v-focus v-color="'blue'">

    </div>
    <script>
        Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
        Vue.directive('color',{
            bind:function(el,binding){
                el.style.color=binding.value;
            }
        })

部分指令可以简写

截屏2020-02-19下午1.08.44-98b14c1fc1af4432a4d081c3331a353f

vue生命周期

lifecycle-da14cb6fd71d48518b50c10dd4be4767

生命周期过程演示

        var app = new Vue({

            beforeCreate(){
                //在data methods 之前
                alert(this.msg)
            },
            data:{
                msg : "唧唧复唧唧，木兰当户织1"

            },
            methods:{
                add(){
                    alert(this.msg)
                    alert("lsdkf")
                }
            },
            
            created(){
                //在data methods 之后
                alert(this.msg)
            },
            //然后是
            el:"#app",

            beforeMount(){
                //模板完成渲染但尚未挂载到页面
            },
            mounted(){
                //挂载完成，用户可以看到页面
            },
            //运行时的两个事件
            //如果data发生改变执行 beforeupdate 和 update
            beforeUpdate(){
                //数据被修改之后执行此方法
                //此时数据是新的，但是页面显示的还是旧的数据
            },
            //执行渲染
            //然后调用方法
            update(){
                //此时数据是新的，页面显示也是新的
            },
            //关闭页面，进入销毁阶段
            beforeDestory(){
                //此时 data methods filter 指令 。。。。 都处于可以使用的状态
            },
            destory(){
                //页面销毁，所有数据不可以使用
            }
        })
  • 方法依次执行

vue发请求

  • 两种第三方包实现方式
  1. vue-resource
  2. axios

vur-resource:

  • 连接：
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
  • 请求方式：get，post，jsonp
this.$http.get("http://www.liulongbin.top:3005/api/getprodlist").then(result => {
                        var result = result.body

                        if(result.status == 0){
                            this.list = result.message
                        }else {
                            alert("失败了")
                        }
                    })

实现post get 请求 以及配置

  • 前端
<html>
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
    <div id="app">
        <h1>添加商品</h1>
        <div>
            <input type="text" v-model="name" v-focus v-model="name">
            <input type="button" value="添加商品" @click="add" @keyup.enter="add">
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>time</th>
                    <th>option</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td>               
                             <input type="button" value="delete" @click.prevent="delete1(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //全局请求的root地址  后面必须加上/
        Vue.http.options.root = "http://localhost:8080/";

        //配置全局post传送输入方式为JSON 这样后端用@ReauestParam就不会报错
        //如果不配置全局并且post中也不加   后端只能用@RequestBody
        Vue.http.options.emulateJSON = true;

        Vue.directive("focus",{
            inserted:function(el){
                el.focus();
            }
        })
        var app = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"jj",time: new Date()},
                    {id:2,name:"dd",time: new Date()},
                ],
                name:"",
                id:"",
            },
            created(){
                    this.getAllList();
                },
            methods:{
                delete1(id){
                    this.$http.get("api/get/" + id).then(result => {
                        this.getAllList()
                    })
                },
                add(){
                    this.$http.post("api/get",{name:this.name}).then(result =>{
                        this.getAllList()
                        this.name = ""
                    })
                },
                
                getAllList(){
                    this.$http.get("api/get").then(result => {
                        this.list = result.body
                    })
                }
            }
        })
    </script>
</body>
</html>

//全局请求的root地址 后面必须加上/
Vue.http.options.root = "http://localhost:8080/";

    //配置全局post传送输入方式为JSON 这样后端用@ReauestParam就不会报错
    //如果不配置全局并且post中也不加   后端只能用@RequestBody
    Vue.http.options.emulateJSON = true;
  • 后端 实现前后端衔接 后端是springboot

controller 层

package com.vue.controller;

import com.sun.tools.corba.se.idl.InterfaceGen;
import com.vue.bean.TestBean;
import com.vue.service.TestService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import sun.jvm.hotspot.utilities.Interval;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * Created by Enzo Cotter on 2020-02-19.
 */
@CrossOrigin
@RestController
@Slf4j
@RequestMapping(value = "/api/get")
public class TestController {

    @Autowired
    private TestService testService;

    @GetMapping(value = "")
    public List<TestBean> get(){
        return testService.findAll();
    }

    @CrossOrigin
    @GetMapping(value = "/{id}")
    public void delete1(@PathVariable(value = "id") Integer id){
        testService.remove(id);
    }

    @PostMapping
    public void insert(@RequestParam(value = "name") String name){
        System.out.println(name);
        testService.insert(name);
    }

}

注解：跨域 ， 返回responsebody，返回数据类型为：JSON，日志，请求路径

组件添加方法3

<html>
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>

    <template id="tem1">
        <div>
            <h1>sss</h1>
        </div>
    </template>
    <div id="app">
        <mycom></mycom>
    </div>

    <script>
        Vue.component("mycom",{
            template:"#tem1",
        })
        var app = new Vue({
            el: "#app",
            data:{

            },
            methods:{

            }
        })
    </script>
</body>
</html>
vue

文章目录

最新评论

最新文章