VUE基础知识

<!-- 引入vue.js文件 -->
<script src="lib/vue.js"></script>
<body>
    <!-- 写好一段模板代码 -->
    <div id="box">
        <!-- 双大括号嵌入vue代码 -->
        {{10+20}}
        {{myname}}
        <button v-on:click="setData">点击修改</button>
    </div>
    <!-- 没挂载的块vue不生效     -->
    <div>
        {{20+30}}
    </div>
</body>
<script>
    //vue模板解析
   var vm= new Vue({
        //模块挂载
        el:"#box",
        //数据挂载
        data:{
            myname:"lili"
        },
        methods: {
            setData:function(){
                this.myname="cjc"
            }
        },
    })
    // data里面的数据都挂到vm里面了，可以用vm.属性名来访问
</script>

注意：

{{a}} 为插值表达式，是vue语法之一，其中a为一个表达式
data里面的数据都挂到vm里面了，可以用vm.属性名来访问data里面的属性，当然，也可以通过this.属性名来访问

vue计算属性

背景：模版内的插值表达式十分便利，但是设计他的初衷是为了简单运算的。在模板中放入太多的逻辑会让模板过重并且难以维护

注意：对于任何包含响应式数据的复杂逻辑都应该使用计算属性

理解：计算属性的特点突出在属性两个字上，首先他是个属性，这个属性他会在特定的函数里面计算，简单来说，他就是一个能将计算结果缓存起来的属性（将行为转化为静态属性），仅此而已，可以想象为缓存

计算属性使用场景

computed：后面接一个对象，里面写属性集

<template>
  <div class="hello">
    <!-- 我要求实现msg的字符串的反转逻辑(内部的逻辑“太”复杂) -->
    <h1>{{msg.split('').reverse().join('')}}</h1>
    <!-- 用计算属性的方式解决 -->
    <h1>{{newMsg}}</h1>
    <!-- 通过方法调用的方式解决 -->
    <h1>{{youngMsg()}}</h1>
    <button @click="change">改变依赖值</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:"helloworld"
      }
    },
    methods:{
      change(){
        this.msg="hiworld"
      },
      youngMsg(){
        return this.msg.split('').reverse().join('')
      }
    },
    //计算属性用于解决模版内的复杂逻辑
    computed:{
      //计算属性的简写形式
      newMsg:function(){
        //方法内访问vue的属性等必须加this
        return this.msg.split('').reverse().join('')
      }
    }
  }
</script>

注意

computed和methods内部的方法名不能重名，重名之后会直接调用methods
methods：定义方法，调用方法使用方法名（）形式，需要带括号
computed：定义属性，调用属性使用属性值形式，不需要带括号
如果属性值的方法中依赖值发生变化，则属性会重新计算（计算属性的方法才会执行），否则不管使用这个属性多少次，他都不会重新计算，不像方法调用一样（调用一次计算一次）

计算属性的setter和getter

计算属性的完全体

<template>
  <div class="hello">
    <!-- 用计算属性的方式解决 -->
    <h1>{{newMsg}}</h1>
    <button @click="msg='hiworld'">改变依赖值</button>
    <button @click="newMsg='newOne'">更改计算属性值</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:"helloworld"
      }
    },
    //计算属性用于解决模版内的复杂逻辑
    computed:{
      newMsg:{
        //计算属性一般是没有set方法的，这就代表着计算属性是一个只读的属性
        //在设置或更改计算属性时调用
        set:function(newValue){
          //这里面的newValue就是更改计算属性的新值
          console.log(newValue);
        },
        //调用newMsg属性时会自动执行
        get:function(){
          return this.msg.split('').reverse().join('')
        }
      }
    }
  }
</script>

watch监听器

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="msg='hiworld'">改变msg</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:"helloworld"
      }
    },
    //监听数据的变化
    watch:{
      //注意：watch里面不用this，因为其是用来监听属性的
      //当msg属性改变时执行后面的方法
      msg:function(newValue,oldValue){
        console.log("msg值改变了，新值为："+newValue+"旧值为："+oldValue);
      }
    }
  }
</script>

vue指令

指令是带有v-前缀的特殊属性以代表他们是vue提供的特殊属性

v-html与v-text

案例


<body>
    <div id="box">
        <!-- 把代码片段放在里面她是不会直接渲染的 -->
        {{mytext}}
        <div v-html="mytext"></div>
        <div v-text="mytext"></div>
    </div>
</body>
<script>
    new Vue({
        el:"#box",
        data(){
            return {
                mytext:"<b>加粗的</b>"
            }
        },
    })
</script>

结论：

v-html/v-text后面的属性会被当做一个变量
v-html会解析这个变量内容，进而将他转变为特定格式
v-text不会解析这个变量内容
v-html/v-text块之间不能有内容，有内容则会被覆盖

v-show

作用：控制此块的展现与消失

v-show后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示

原理：css层面将此块的display设置为none

v-on

v-on:事件名=“函数”
@事件名=“函数”

作用：此事件触发时立刻执行后面的函数

案例

<body>
    <div id="box">
        <div v-show="flag">{{word}}</div>
        <button @click="appear">点击显示</button>
        <button v-on:click="disappear">点击消失</button>
    </div>
</body>
<script>
        new Vue({
            el:"#box",
            data() {
                return {
                    word:"我是一段话",
                    flag:false
                }
            },
            methods: {
                appear(){
                    this.flag=true
                },
                disappear(){
                    this.flag=false
                }
            }
        })
</script>

v-if

作用：满足条件的块展示否则不展示

v-if：后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示
v-else-if：和v-if用法一致，如果v-if的表达式不满足条件就会直接走v-else-if
v-else：如果v-else-if也不满足条件则会走v-else

注意：3者按照从上到下顺序执行，三者是一个整体，如果v-if和v-else-if都满足则会只显示v-if块

v-if和v-show的区别：v-if中如果不满足田间的块直接不存在，而v-show中不满足条件的块也存在只是不显示而已

v-model双向绑定

通过v-model指令实现双向绑定，修改一方的同时修改相同的另一方，达到数据的同时更新，输入框等表单控件用的比较多

v-model=“vue中的数据属性”

双向绑定修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，你可以添加lazy修饰符，从而转变为在change事件（不会立刻同步，而是在失去焦点或回车的时候进行同步）之后进行同步

.trim

如果要自动过滤用户输入的首尾空格，可以给v-model添加trim修饰符（就是输入之后默认取消首尾空格）

案例

<body>
    <div id="a">
        <input type="text" v-model="person.age">
        <input type="text" v-model.lazy="person.age">
        <input type="text" v-model.trim="person.age">
        {{person.age}}
        <p v-if="person.age>18">中年人</p>
        <p v-else-if="person.age==18">青年人</p>
        <p v-else>小屁孩儿</p>
    </div>
</body>
<script>
    new Vue({
        el:"#a",
        data() {
            return {
                person:{
                    age:""
                }
            }
        },
    })
</script>

v-bind

当属性的值是变量而不是字符串时就可以通过v-bind标识，vue会自动处理

语法

v-bind：属性名=“属性值”
：属性名=“属性值”

作用：标识属性名所对应的属性值是一个变量

案例

<style>
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>
<body>
    <div id="box">
        <!-- 下面的red和blue必须为字符串类型 -->
        <div :class="current?'red':'blue'">我是一条狗狗</div>
        <button @click="changeColor">换颜色</button>
    </div>
</body>
<script>
    new Vue({
        el:"#box",
        data() {
            return {
                color:"",
                current:true
            }
        },
        methods: {
            changeColor(){
                this.current=!this.current
            }
        },
    })
</script>

v-for

语法：v-for="(data,index) in datalist"

属性

datalist：为挂载在vue的data里面数据集合
data：为datalist里面的单个数据
index：为数据所在的下标索引，从0开始，其可以省略不写，不是必写项

列表案例

<body>
    <div id="box">
    <ul>
        <li v-for="(data,index) in datalist" :key="data.id|index">{{data}}</li>
    </ul>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    new Vue({
        el:"#box",
        data() {
            return {
                datalist:[
                    {id:"1",title:"新闻"},
                    {id:"2",title:"小说"},
                    {id:"3",title:"动漫"},
                ]
            }
        },
    })
</script>

key属性的作用：判断当前id下的元素是否发生变化，如果发生变化则渲染该元素，若没有则不渲染，解决了数组中一个元素改变就渲染整个数组的问题。

下拉选单案例

<body>
    <div id="box">
    <div>{{count}}</div>
    <!--v-model里绑定的是下面数据的value内的data.id-->
    <select size="1"  v-model="count">
        <option v-for="(data,index) in datalist" :value="data.id">{{data.title}}</option>
    </select>
    </div>
</body>
<script src="..\..\vue\lib\vue.js"></script>
<script>
    new Vue({
        el:"#box",
        data() {
            return {
                count:"0",
                datalist:[
                    {id:"0",title:"新闻"},
                    {id:"1",title:"小说"},
                    {id:"2",title:"动漫"},
                ]
            }
        },
    })
</script>

理解：通过v-model绑定value的这种方式就可以在选中特定下拉选单时data.id值的同时变化，这样就可以确保在data值中多key情况下可以通过data.id来作为datalist数组的下标来确认另外其他key值的情况（其实这里的data.id就相当于index，value用index也可以）。

v-clock

语法：直接在未渲染完成的可能出现插值表达式等的地方加v-clock属性，然后通过属性选择器将v-clock的display属性设置为none

案例

<script src="./lib/vue.js"></script>
<style>
    /* 解决一闪而过的插值表达式 */
    [v-clock]{
        display: none;
    }
</style>
<body>
    <div id="app" v-clock>
         {{msg}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                msg:"hello world"
            }
        },
    })
</script>

理解：页面未渲染完成时会先显示出标签，进而出现闪烁问题，通过以上方法，可以使未渲染完成时先隐藏标签，渲染完成之后再显示，这样就解决了闪烁问题

vue的生命周期函数

含义：vue实例在某一个时间点会自动执行的这些函数。我们通常也称其为钩子

注意：

生命周期函数是vue针对用户提供的扩展的功能，如果编辑了生命周期函数，则vue对象会自动执行无需手动调用
生命周期钩子函数不可以写成箭头函数
在vue生命周期的不同时刻会执行不同的生命周期函数
vue生命周期函数写的位置与methods属性同级别

生命周期函数种类

1.初始化阶段

beforeCreate：对象创建前
created：对象创建后
beforeMount：对象挂载前
mounted：对象挂载后

2.vue对象的修改

beforeUpdate：对象修改前
updated：对象修改后

3.对象的销毁

beforeDestroy：对象销毁前
destroyed：对象销毁后

代码展示

<body>
    <div id="app">
        <input type="text" v-model="msg"><!-- 更改 -->
        <h1>{{msg}}</h1>
        <button @click="disappear">点击销毁</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg: 'hello vue!'
                } 
            },
            methods: {
                    disappear:function(){
                        eval("vm.$destroy()")/* 执行vue对象销毁命令 */
                    }
                },
            //vue生命周期的初始化阶段的钩子函数:
            beforeCreate() {//还没new Vue时触发的
                console.log('beforeCreate..');
            },
            created() {//刚new完Vue时触发的
                console.log('created..');
            },
            //vue生命周期的服务阶段的钩子函数:(挂载,更新beforeUpdate/updated)
            beforeMount() {//还没有解析插值表达式
                console.log('beforeMount..');
                console.log(this.$el);//获取el对应的dom节点的内容
            },
            mounted() {//刚解析插值表达式
                console.log('mounted..');
                console.log(this.$el);
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("updated");
            },
            //vue生命周期的销毁阶段的钩子函数:(销毁)
            //需要在浏览器的控制台输入vm.$destroy()才会执行销毁阶段
            beforeDestroy() {
                console.log('beforeDestroy..');
            },
            destroyed() {
                console.log('destroyed..');
            }
        })
    </script>
</body>

测试：进行修改和删除操作，并注视控制台的改变

vue操作dom元素

在vue中ref可以以属性的形式添加给vue标签或组件

ref写在标签上

用vue对象.$refs.vuetext(ref的值，随意写)来获取添加了ref="vuetext"标签上对应的dom元素

    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="all">
        <div id="header" ref="vuetext"></div>
        <button @click="change">点击</button>
    </div>
</body>
<script>
    new Vue({
        el:"#all",
        methods: {
            change(){
                this.$refs.vuetext.innerText="别点了"
            }
        },
    })
</script>

ref写在组件上

用vue对象.$refs.value/vue对象.$refs['value']来获取添加了ref="vuetext"标签上对应的组件

    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="all">
        <home ref="value"></home>
        <button @click="change">点击</button>
    </div>
</body>
<script>
    Vue.component('home',{
        template:"<div>{{num}}</div>",
        data() {
            return {
                num:"hello"
            }
        },
    })
    new Vue({
        el:"#all",
        methods: {
            change(){
                this.$refs.value.num="hello world"
                //this.$refs['value'].num="hello world"也可以
            }
        },
    })
</script>