VUE的基础语法

Posted 2020-09-08 熊猫哥哥

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

　　例如{{name}}，如果只想插入一次就用<span v-once>{{name}}</span>;\

每个通过vue绑定的属性都是返回json，所以这里面可以写表达式，但是不能写语句。

 

一.VUE指令

1.v-text    更新元素的textcontent

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.v-html　　更新元素的innerhtml。（内容按普通html插入，不会作为Vue模板进行编译，只在可信内容上使用，永不用在用户提交的内容上）

<div v-html="html"></div>

3.v-show　值为布尔值true或false，来切换元素的display值

4.v-if   v-if与v-show的区别在于v-if的元素及数据绑定/组件被销毁并重建，而v-show只是改变display值，v-else以及v-else-if同上

5.v-for   基于源数据多次渲染元素或模板块，必须使用特定语法alias in expression，为当前遍历的元素提供别名。

 

    <div id="app">
        <div v-for="(item,index) in list">{{item.name}}--{{index}}</div>
　　　　　<--这里面item代表源数据里面的每个数据，这里支持第二个参数为当前项的索引,这里也可以用of来替代in           in是代表遍历属性，of表示遍历值-->
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                list:[
                    {name:"bgg"},
                    {name:"xiongmao"}
                ]
            }
        })
    </script>

 6.v-on　　绑定监听事件，事件类型由参数指定，用在普通元素上面只能监听原生DOM事件，用在自定义组件上面可以监听子组件触发的自定义事件，在监听原生Dom事件时，方法以事件为唯一的参数，如果使用内联语句，只可以访问一个$event属性v-on:click="handle(‘ok‘, $event)"         ------------重点--------------

 

-------------------修饰符--------------------------------

.stop    调用event.stoppropagation()事件

.prevent    阻止默认事件，调用event.preventdefault();

.capture       添加侦听事件的时候使用capture模式

.self 　　　　只当事件是从侦听器绑定的元素本身触发时才回调

.{keyCode |keyalias}　　　只当事件是从侦听器绑定的元素本身触发时才回调　

.native 　　　　监听组件根元素的原生事件