vue 基本指令

vue 基本指令

所有的指令 v-指令名称 = 表达式(而不是普通的字符串)
在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，
指令的值是引号括起来的 表达式，不同的指令有不同的作用，
vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令

    <div class="app"> 
        {{messageX+messageX}}
        <!-- 表达式:多个变量数值通过运算得出的是最终结果 -->
        <h1>Hello,{{title}}</h1> <!--可以拼接一些内容  -->
        <h1 v-text="title"></h1> <!-- 内容输出 和大胡子语法基本一致，没啥区别
            弊端：v-text会填充整个 innerHTML -->
        <!-- <p>{{content}}</p>  -->
        <!--{{content}}是用户传的数据,
        这么写的话按照字符串数据显示输出，不编译不编译防止xss攻击，所以想了个办法
            用v-html来能正常解析处理
          -->
        <!-- <p v-html = "content"></p>  -->
        <!-- 为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，
            通过 v-html 可以让内容作为 html 进行解析 -->
        <p v-cloak>{{content}}</p>
        <!-- v-cloak直接写 他对应的是css里的样式 编译结束是时效 -->
        <p v-once>{{mass}}</p>
        <!-- 在控制台重新编译，页面没变化 -->  
        <p v-pre>{{这里和子元素将不会被编译}}</p>
    </div>

       let app = new Vue({
            el:".app",
            data:{
                mycalss:"box",
                messageX:1,
                messageY:2,
                title:"EGM",
                content:"<style> body{background:black}</style>",
                mass:"我只能编译一次"       
            }
        })

v-show，v-if，v-else

v-if 根据表达式的值（布尔值），创建或销毁元素
改变的是元素的结构(渲染或删除)，适用于状态切换不频繁的情况
v-else并不能单独出现，必须跟着v-if或者v-else-if成对出现，
它会将结合v-else-if或者v-if，如果满足前面两点，则v-else的内容
不会渲染，如不满足，则将v-else所在的DOM进行渲染
v-show 根据表达式的值（布尔值），切换元素的显示与隐藏(display属性)
适用于状态切换频繁的,tab选项卡 轮播图等…

    <div id="app">
        <div v-show="islogin">这里是能隐身的v-show</div>
        <div v-if = "islogin">我是v-if</div>
        <div v-else>我是v-else</div>
        <div v-else-if>我是v-else-if</div>
    </div>

        let app = new Vue({
            el:"#app", //el这里相当于 document.querySelector('#app') id具有唯一性
            data:{
                islogin:true,
            }

        })

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素，for in和of这里没有什么区别，可以循环的数据：Array | Object | number | string | Iterable
渲染原理: 模板上数据先去 虚拟dom虚拟的先优化处理 然后加载到真实的dom虚拟dom没次加载之过后，像是缓存一样留一份加载的备份，再次加载时候如果数据有变动更改变动的地方，如果数据没有发生变化那么原样渲染，达到优化效率，提高加载速度
现在要把input框绑给后面的数据，数据变化，input框也跟着变化
key:属性，来给每个循环节点(这里是id)添加一个标识，
达到彼此绑定,因为有一部分内容相互绑定,只要有一个变都会相互牵连，达到渲染的目的。

            <li v-for ="user in users":key ="user.id">
                <input type="checkbox">
                {{user.id}}---{{user.name}}
            </li>

        <div v-for="(val,name,index) in object">
            <span>索引值:{{index}}</span>
            <span>属性名:{{name}}，值:{{val}}</span>
        </div>

    let app = new Vue({
        el:".app",
        data:{
           users:[
            {id:1,name:"小刘"},
            {id:2,name:"小装"},
            {id:3,name:"小网"},
            {id:4,name:"小罢"}
           ],
            object:{
                x:"a",
                y:"b",
                z:"c"
            }
        }
    })

在控制台输如这段话，顺序会随机打乱，但是 input框不会跟着变
需要加载、在for循环后加key

 app.users.sort((a,b)=>{
	return Math.random() -0.5
})

指令属性绑定

v-bind
*v-指令名称:参数 = “指令的值”
简写：用 : 代替 v-bind, 等号后不是 字符串 是表达式，我们需要的是结果

  <div class="app">
        <div v-bind:class = "myclass"></div>
        <div :class = "myclass">简写</div>
        <div :id ="ID"></div>
    </div>

    <div class="app">
        <div :style = "style1"></div>
        <!-- 数组写法
        :style 获取的是具体样式
        :class 获取的是类名
        -->
        <div :class ="box1">这里添加的是class类名</div>

        <!-- style1，style2要的是样式，前面要写style 两组的数据合并在一起，不能加引号-->
        <div :style = "[style1,style2]">具有多个类型名时</div>

        <!-- box1,box2 是类名加引号 new_box是值 这里的值一般只是true或者false
        默认false, 当为false时不加载其样式，true加载
        -->
        <div :class = "{'box1':new_box,'box2':two_box}">具有多个类型名时</div>
    </div>

        let app = new Vue({
            el:".app",
            data:{
                style1:{
                    width:"200px",
                    height:"200px",
                    background:"red",
                },
                style2:{
                    // width:"300px",
                    // height:"300px",
                    border:"1px sold black"
                },
                box1:"clas",
                new_box:true,
                two_box:true
            }

        })

数据流，双向数据绑定

数据流，用来形容数据的一种走向
v-bind:单项数据绑定 ，数据=>视图, 视图不能影响数据
v-model 双向数据绑定 数据 => 视图 视图=>数据 相互影响
v-model双向数据绑定用于交互性元素，不是所有的便签(组件)都支持v-model
–默认：交互元素(input textarea,select)支持双向数据绑定
input: value
textarea:value
select:selected
不是所有的属性都支持 v-model，v-model 只能绑定一个指定好的属性,不能同时绑定多个
非交互元素: div p img等静态元素，不需要统计信息

    <div class="app">
        <!-- 双向数据绑定 原理:监听input的value值 -->
        <input type="text" v-model="msg">
        <div>{{msg}}</div>
        -->
        <br>
        <input type="text " :value="msg2">
        <div>{{msg2}}</div>
    </div>

        let app = new Vue({
            el:".app",
            data:{
                msg:"38",
                msg2:"sdf"
            }
        })