Vue.js的一些指令

内容渲染指令

v-test: 将内容渲染到制定的容器内，缺点：他会覆盖元素中的默认内容，并且不能自动识别html的一些特定代码，不能将html里面的内容转译过来。

v-html: 用处：把带有HTML标签的字符串渲染为真正的DOM元素，将html中的内容转译为正常的内容，具体代码如下：

    <div id="app">
        <p>姓名:{{username}}</p>
        <div  v-html="info"></div>
        <div>{{ info }}</div>
    </div>
            data: {
                username: '张三',
            }
        })

属性绑定指令 v-bind,他的简写为 : 一个英文的冒号，具体使用代码如下：

    <div id="app">
        <input type="text"  :placeholder="tips">
        <div>{{tips}}反转的结果是:{{tips.split
            ('').reverse().join('')}}</div>
    </div>
            data: {
                tips: '请输入用户名',
                index: 3
            }
        })

事件绑定指令

v-on:他的简写为@，具体的使用代码如下：

    <div id="app">
        <p>count的值是:{{ count }}</p>
        <button @click="add(2)">+1</button>
    </div>
    <script  src="./lib/vue-2.6.12.js"></script>

双向数据绑定指令

v-model:只能用在表单元素上，可将数据进行双向绑定，当修改调试器的vue内的值时，页面上的值也会跟着变化，具体使用代码如下：

<body>
    <div id="app">
        <p>用户的名字是{{username}}</p>
        <input type="text" v-model="username">
    </div>
 
            data: {
                username: 'zhangsan'
            }

修饰符： .number .trim .lazy等等，这些都是vue里面的修饰符

后续还有条件渲染指令和过滤器以及watch监听器computed组件等等，这些vue的常用指令都有各自的简写，使用简写会使我们的开发效率大大提高，后续还有循环渲染指令v-for，条件渲染指令v-if,v-else，这些都是vue常用的基础指令，需要我们牢牢掌握。

vue基础day1

Vue.js的一些指令