vue指令

1.基本写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>
 
2.v-if,v-else指令:判断是否加载HTML的dom,否则执行v-else;
   v-show:调整css的dispaly属性,DOM已经加载,只是CSS控制没有显示出来。
 
3.v-for:模板循环    <li v-for="item in items">{{item}}</li>
     js:var app=new Vue({
            el:'#app',
            data:{
               items:[,,,]
            }
        })
 
4.computes属性:里面声明函数对象
 
5.v-text:网速过慢时,不会暴露{{xxx}}内容
   v-html:js中有html标签
 
6.v-on:绑定事件监听器   v-on:vlick=“ ”   在new Vue({})中写methods
 
7.v-model:双向绑定,把数据绑定在特定的表单元素上,改表数据可同时更改文本数据
   修饰符:.lazy点击其他输入框才改变   .number输入数字改变   .trim输入去掉首尾空格
 
8.v-bind:绑定值,要在vue中的data属性中声明;绑定css样式
 
9.v-prev:输入原始值
   v-cloak:vue渲染完整个dom后显示,必须和css样式一起使用
   v-once:第一次dom时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程
posted @ 2018-03-31 12:14  heals  阅读(129)  评论(0编辑  收藏  举报