Vue基础精讲-CSDN博客

vue基础精讲

一、VUE的模板语法

vue的模板语法比较常用的有三种：

{{msg}}
- 插值表达式是{{msg}},会以文本的方式，将data中相同名字的msg表现出来
v-html
- v-html="name"，v-html会以HTML代码的形式渲染出data 中name的内容
v-text
- v-text="name"，v-text会以文本的形式渲染出data中的name内容

注意：

v-text和v-html后面双引号内的形式是一种js表达，而不是字符串

插值表达式也可以是一个js表达式

例子

 <div id="app">
        <div>{{name}}</div>
        <div v-text="name+'胡志武'"></div>
        <div v-html="name+'胡志武'"></div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                name:"<h1>我的名字是：</h1>"
            }
        })
    </script>
复制代码

效果

二、计算属性，方法，侦听器

看如下代码

<div id="app">
        我的名字{{fullName}}
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                firstName:"志武",
                lastName:"胡",
                fullName:"胡志武",
                age:18
            },
        })
    </script>
复制代码

我们会发现fullName = lastName+firstName，而在data中则是写死了数据，在这里我们可以用方法，method来重写该功能

<div id="app">
        我的名字{{fullName()}}
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                firstName:"志武",
                lastName:"胡",
                age:18
                // fullName:"胡志武",
            },
            methods:{
                fullName:function(){
                    return this.lastName+this.firstName
                }
            }
        })
    </script>
复制代码

但是methods是不具有缓存机制的，只要data中有一个值改变，methods就重新渲染一遍。

我们可以在fullName函数中加上一句，console.log("渲染了一次")来测试

我们会发现，只要视图中需要渲染的其他值一改变，methods就会重新渲染一次，这是非常耗费性能的

注意，如果age在网页中是没有渲染的，即在div#app中没有调用age的值，则age的改变不会让methods重新渲染

现在介绍vue的侦听器，它具有缓存机制，并且，只有所依赖项变化时，它才重新渲染

watch{}

现在改代码如下

<div id="app">我的名字{{ fullName }} 年龄{{ age }}</div>
<script> 
var app = new Vue({
        el: "#app",
        data: {
          firstName: "志武",
          lastName: "胡",
          fullName: "",
          age: 18
        },
        watch: {
          firstName: function() {
              console.log("渲染了一次")
            this.fullName = this.lastName + this.firstName;
          },
          lastName: function() {
            console.log("渲染了一次")
            this.fullName = this.lastName + this.firstName;
          }
        }
      });
</script>
复制代码

在浏览器中测试如下

可以看到，watch侦听器是只有在依赖的firstName和lastName改变时才重新渲染，它具有缓存机制

可我们现在发现这个watch要监听两个参数的变化，如果依赖过多就要要写好多代码

所以vue有个计算属性computed:{}，只要依赖项变化，就重新渲染，然后只要监听fullName即可，在data中也不用注册fullName这个属性的值，在html中就可以调用了

<div id="app">我的名字{{ fullName }} 年龄{{ age }}</div>
<script>
         var app = new Vue({
        el: "#app",
        data: {
          firstName: "志武",
          lastName: "胡",
          age: 18
        },
        computed:{
            fullName:function(){
                console.log("渲染了一次")
                return this.lastName+this.firstName;
            }
        }
    
      });
</script>
复制代码

浏览器测试如下

综上：methods没有缓存机制，有一个值改变，就渲染一次，而且在html中必须以函数调用的方式使用

watch有缓存机制，监听的是依赖项，依赖项一变化，就重新渲染，而且在data中必须注册fullName这个属性

computed有缓存机制，监听的是总体（fullName）,只有依赖项一变化，就重新渲染

三、computed的set和get

在computed中，set可以用来赋值，get可以用来取值

如下

<div id="app">
       {{fullName}}
   </div>
   <script>
       var app = new Vue({
           el:"#app",
           data:{
               firstName:"志武",
               lastName:"胡"
           },
           computed:{
               fullName:{//这时候，fullName是一个对象
                   get:function(){
                       return this.lastName+" " +this.firstName;//在取值
                   },
                   set:function(value){//赋值时
                       var arr = value.split(" ");
                       this.lastName=arr[0];
                       this.firstName=arr[1];
                   }
               }
           }
       })
   </script>
复制代码

浏览器效果如下

四、样式绑定

现在我们要实现一个功能，就是点击文字出现红色和黑色的替换效果

要实现这个功能就涉及到了vue的样式绑定

先说第一种class的对象绑定

<div id="app" 
    :class="{actived:isActived}"
    @click="changeColor">
       {{content}}
   </div>
   <script>
       var app = new Vue({
           el:"#app",
           data:{
               content:"hello world",
               isActived:false
           },
           methods:{
               changeColor:function(){
                   this.isActived=!this.isActived;
               }
           }
       })
   </script>
复制代码

:class="{actived:isActived}" actived是我要绑定的类名，而isActived是一个布尔值，决定这个标签要不要绑定**

第二种class的数组绑定

这时。:class="[actived]"，数组里可以写多个类名，都会到data中去找到对应的值

第三中style的对象绑定

 <div id="app"
        :style="styleObj"
        @click="changeColor"
   >
       {{content}}
   </div>
   <script>
       var app = new Vue({
           el:"#app",
           data:{
               content:"hello world!",
               styleObj:{
                   color:"black",
               }
           },
           methods:{
               changeColor:function(){
                   this.styleObj.color=this.styleObj.color=="black"?"red":"black"
               }
           }
       })
   </script>
复制代码

:style="这里可以绑定一个对象"

第四种 style的数组绑定

:style="[styleObj,{font-size:30px}]"

五、vue的条件渲染

v-if="show"
v-show="show"

两者都能实现模板标签的展示与隐藏，但v-if是渲染与不渲染，而v-show是渲染了，但会由display来控制模板标签的展现与隐藏，所以当需要频繁展现与隐藏时，用v-show性能比较好

<div v-if="show==1">
    this is 1
</div>
<div v-else-if="show==2">
    this is 2
</div>
<div v-else>
    this is other
</div>

复制代码

用v-if和v-else-if、v-else时，这三个条件所在的模板标签不能有其他标签阻隔，不然会失效

key的作用

vue为了提升性能，会复用dom,假如有些dom是唯一的，不可变换的，你可以给它加上一个唯一的key值

下面的代码和演示可以很好的告诉你，我们为什么要用key

<div id="app">
      <div v-if="show">
          <span>用户名：</span>
          <input type="text">
      </div>
      <div  v-else>
          <span>邮箱：</span>
          <input type="text">
      </div>
  </div>
  <script>
      var app = new Vue({
          el:"#app",
          data:{
              show:true,
          }
      })
  </script>

复制代码

我们可以看到，用户名被隐藏，而邮箱被显示时，input框的内容还是原来的内容，这就是vue对dom的复用

这时，我们给input加上一个:key=username和:key=password就可以了，只要key不同，vue就不会去复用dom

六、列表渲染

v-for="(item,index) of list"可以用来遍历数组，为了提高性能，应该加个:key，key值最好不要是index，而是后端数据库传过来的id值

在vue种，通过数组的下标来改变或增加数组中的某个值，vue是不会响应式的渲染的，只有用数组的七个方法：pop,shift,unshift,reserve,sort,splice,push或是改变数组的引用，才能让vue重新渲染。演示如下

<div id="app">
        <div v-for="(item,index) of list"
            :key="item.id">
            {{item.text}}---{{index}}
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,text:"海贼王"},
                    {id:2,text:"火影忍者"},
                    {id:3,text:"魔法禁书目录"}
                ]
            }
        })
    </script>

复制代码

可以发现，通过数组下标来改变数据，虽然data中的list会改变，但是vue却不会在视图上去渲染，

但只要用数组的七个方法，vue就会渲染

还有一个方法就是改变数组的引用了

列表渲染中template的使用

template就等于是一个模块，可以在遍历的时候，包裹出你想展示的形式，但在html中不会显示template这个标签，只会显示它包裹的内容

<div id="app">
            <template v-for="(item,index) of list"
                :key="item.id">
               <span>{{item.text}}</span>
               &nbsp;&nbsp;
               <span>{{index}}</span>
               <br>
            </template>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:[
                        {id:1,text:"海贼王"},
                        {id:2,text:"火影忍者"},
                        {id:3,text:"魔法禁书目录"}
                    ]
                }
            })
        </script>

复制代码