Vue

时间：2021-05-15 19:04:54 收藏：0 阅读：22

1. 什么是Vue？　　渐进式JavaScript框架，是数据驱动的框架，是一个MVVM框架

2. angular Vue,react 都是把后端提供给前端的不断变化的数据，实时的渲染为用户的视图

3. Vue的生态特别好

4. Vue的环境搭建

开发版本

生产版本

    <div id="box">
         {{a}}　　// 插值表达式
         <p>{{str}}</p>
         <p title="world">hello</p>     // 把“xxx”当变量处理
         <p v-bind:title="a">hello</p>  // 把“xxx”当变量处理
         <p :title="a">hello</p>        // 简写
         <img v-bind:src="‘img/‘+url+‘.jpeg‘" width="100" />
         <img v-bind:src=`img/${url}.jpeg` width="100" />
    </div>
    <script>
         var vm =  new Vue({
                el:"#box", //表示把vue的是实例挂载到id叫box的元素上
                          //body ,html不能挂载
                data:{
                    str:"hello world",
                    a:123,
                    url:"3"  //存储的图片的名字
                },
               // template:"<div><div>hello</div><div>world</div></div>"  //temlate指定渲染数据的模板 根元素只能有一个
               // template:"<div>hello {{a}}</div>"
           })
    </script>

　　指令 v-bind 把变量的值绑定到标签的属性上可以简写为 : 。

　　模板 template

　　1) template和el同时存在渲染的是template的内容

　　2) 模板的内容不能只是文本

　　3)根元素只能有一个

　　指令 v-on 事件监听的指令 v-on:事件="事件处理函数"

　　1）事件处理函数是放在methods里面

　　2）实际处理函数如果调用时不传参数传递的参数是$event

　　3) 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent

　　4) 简写为 @

　　5) 监听键盘事件 v-on:keyup.enter 回车 v-on:keyup.esc esc键

　　v-bind :

　　　v-bind:style="{key:value....}"

　　　v-bind:class="{‘类名‘:布尔值的表达式}" 常用

　　　v-bind:class="[类名1，类名2...]"

　　v-if 是惰性的条件不满足，不渲染如：

　　v-show 满足条件显示，不满足条件的就隐藏

　　v-for 指令

　　　　1）遍历数组 (item,index) in array

　　　　　　一定要指定key值表示列表中的每一项

　　　　 2) 遍历对象 (value,key,index) in obj

　　　　3)遍历数字从1开始

　　　　4)遍历字符串

　　注意：原则，不要把v-for 和v-if用在用一个元素上，因为v-for优先级比v-if高

原文：https://www.cnblogs.com/SeventhMeteor/p/14770913.html