vue 指令

 

 

vue的核心是数据

双大括号只能在元素内部使用:例如在data处定义name需要输出则使用"123" 123

---

指令 --- 补充html的属性

v-bind:xx="xxx" 简写:xxx=”xxx“

class 动态绑定上去使用 v-bind:class="xxx" xxx可以是字符串形式，也可以使用数组形式

class 动态绑定上去使用 v-bind:class="xxx" xxx可以是字符串形式，也可以使用数组形式

---

v-model（进来数据是字符串） 数据双向绑定 多用于表单型元素(输入性组件)

示例

 +  = 0

---

v-text (类似双大括号输出字符串 元素标签会被直接当字符串输出【不常用】) 
v-html （可以将需要输出字符串中的html片段不进行处理直接输出，即按html输出）

示例

<p>这是一段代码片段</p>

这是一段代码片段

---

vue事件指令 --- v-on:xx="xxx" 简写 @xxx="xxxx"

使用v-on绑定事件 监听DOM事件 用来触发vue实例methods中定义的方法

 0

---

vue条件渲染指令 点我看区别

v-show ---- 隐藏的时候html还在dom中只是使用了css display:none;隐藏

示例

我还在dom中

---

v-if ---- 隐藏的时候html从dom中彻底消失

示例

我隐藏不在dom中

---

vue循环渲染指令

v-for ---- 可循环数组/对象/数字/字符串

v-for中最好使用：key 有利于性能提升，

v-for="item,index in array"

v-for="val,key in json"

v-for="char,index in str"

v-for="i in num"

---

vue 预编译

v-pre ---- 原样输出vue不做任何处理

---

v-cloak 常用于vue编译完成之前的隐藏

 

<script type="text/javascript">
let vm = new Vue({
            el: "#app",
            data: {
                name: 123,
                count1: 0,
                count2: 0,
                elements: '<p>这是一段代码片段</p>',
                click: 0,
                shows: true
            },
            created() {},
            methods: {
                count() {
                    return Number(this.count1) + Number(this.count2)
                    // 使用箭头函数this讲指向new 出来的vue实例
                    console.log(this)
                },
                fn(n) {
                    return this.click = this.click + n;
                },
                show() {
                    this.shows = !this.shows;
                }
            }
        })
</script>