vue指令

vue指令

表达式

• 一些数值通过 运算获取 来取得的结果的式子
• 变量，多个变量，多个数值通过运算组成的内容
• v-指令名称 = 表达式（而不是普通字符串）

表达式的出现
表达式的值放在内容区可以，但不可以放在属性中去
不能使用 {{}} 语法，而是需要 指令

< div class=“box” >
{{x+y}}
< /div>

< script>
let box = new Vue({
el:".box",
data:{
x:4,
y:3,
}
})
< /script>

v-text

< h1 v-text = “text”>hello< /h1>

v-text的弊端 v-text 会填充整个 innerHTML

v-html

为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析

< p v-html = “content”>< /p>

v-once

只渲染元素和组件一次，后期的更新不再渲染

< div v-once>
< h1>comment< /h1>
< p>{{msg}}< /p>
< /div>

v-pre

不需要表达式， 忽略这个元素和它子元素内容的编译

< span v-pre>{{ msg }}< /span>

v-if

• 改变的是元素的结构（渲染或者删除）
• 使用于：状态切换不频繁的情况
• v-if 和 v-else以及v-else-if 之间必须是连接的,中间不能出现其他元素

< div v-if = “islogin”> 欢迎登陆< /div>
// < p>haahh< /p>
< div v-else = “islogin”> 请登录< /div>
< script>
let box = new Vue({
el:".box",
data:{
islogin:true
}
})
// box.islogin = false
< /script>

v-show

• 改变的只有该元素的disp样式
• 使用于：数据的改变比较频繁

< div v-show = “islogin”>这是秘密< /div>

v-for

• 可以循环的数据：Array | Object | number | string | Iterable

 < div id="app">
        < ul>
            < !--  of 和 in 在这里使用没有区别 -->
            < li v-for = "user of users":key="user.id">
                < input type="checkbox">
                 {{user.id}} - {{user.name}}
            < /li>       
        < /ul>
        < !-- 循环对象 -->
        <  div v-for="(val, name, index) in object">
            < span>索引值：{{index}}< /span>
            < span>值：{{val}},属性名：{{name}}< /span>
        < /div>
    < /div>

sort排序问题

• 值的排序循序发生改变的时候，值对应的数据一直在变，除此之外的不变

• 涉及到虚拟DOM的概念，这里的数据渲染在模板上，不是直接到DOM上

• 模板上数据先去了vdom上，最后数据才到HTML上

• vdom 的机制，每次在加载过后会留存一份备份，之后再渲染时，与备份相对比，不一样的地方修改，一样的地方则立即渲染

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

• 解决方法： 我们可以通过 :key 属性，来给每个循环节点添加一个标识，达成像彼此绑定的关系

< ul>
< !-- of 和 in 在这里使用没有区别 -->
< li v-for = “user of users”:key=“user.id”>
< input type=“checkbox”>
{{user.id}} - {{user.name}}
< /li>
< /ul>

v-bind

• v-指令名称：参数 = “指令的值”
• 有的一些常用指令会有对应的缩写，v-bind 对应的缩写为：:
• 简写： ：=> v-bind

< div id=“app”>
< div v-bind:class=“myclass”>< /div>
< div :id=“ID”>< /div>
< /div>

数组绑定—样式

数组写法

style 获取的是具体的样式
：class 获取的是类名

 < div :class = "one">< /div> < div :style ="[style1,style2]">< /div>

对象写法

> < div :class = "{'box1':newbox,'box2':twobox}">< /div>

 <script>
        let app = new Vue({
            el:"#app",
            data:{
                style1: {
                    width: '100px',
                    height: '100px',
                    background: 'green'
                },
                
                style2: {
                    border: '1px solid black'
                },
                one:"box",
                newbox:true,
                twobox:false
            }
        })

    </script>

数据流

单项数据流

• v-bind ：单项数据绑定， 数据一改变就渲染到视图

• v-model：双向数据绑定， 数据 => 视图， 视图 => 数据

• 不是所有的标签（组件）都支持 v-model
  默认：交互元素（input , textarea, select)比如说用户能够点动的，用户能够输入的
  不是所有的属性都支持 v-model

• v-model 只能绑定一个制定好的属性
  支持的有：
  input ：value
  textarea : value
  select : selected

• 非交互：div p img 等静态类标签（不需要统计信息的）

< div id="app">
        <!-- 双向数据绑定 -->
        <input type="text" v-model = "msg">
        <div>{{msg}}</div>
        <br />
        <!-- 单项数据绑定 -->
        <input type="text" :value = "msg2">
        <div>{{msg2}}</div>
    </div>