当前位置 : 主页 > 网页制作 > html >

vue 指令

来源:互联网 收集:自由互联 发布时间:2021-06-12
vue的核心是数据 双大括号只能在元素内部使用:例如在data处定义name需要输出则使用"123" 123 指令--- 补充html的属性 v-bind:xx="xxx" 简写:xxx=”xxx“ class 动态绑定上去使用 v-bind:class="xxx" xxx可

 

 

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>
网友评论