vue的指令

我之前学了学angular

发现angular和vue的指令有点类似

先说一下

new  Vue({

         el: "#box", // element（元素） 当前作用域

         data(){

                return { //用return返回对象

                       msg: "122"

                }

            }

        })

首先是

v-model双向绑定数据

<input type="text" v-model="msg"/>   {{msg}} <!--取数据-->

 

v-for循环

 

 <div id="box">
     <ul>
         <!--ng-repeat-->
         <li v-for="item in arr">
             <span>{{item.name}}</span>
             <span>{{item.age}}</span>
         </li>
     </ul>
 </div>
 <script type="text/javascript">
     new Vue({
         el:'#box',
         data(){
             return{
 //                arr:['module','views','controlle','aaaaa']
                 arr:[
                     {"name":"xiaohong1","age":12},
                     {"name":"xiaohong2","age":12},
                     {"name":"xiaohong3","age":12},
                     {"name":"xiaohong4","age":12}
                 ]
             }
         }
     })
 </script>

v-show 显示与隐藏

<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-if显示与隐藏  （dom元素的删除添加   个人理解）

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-else

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-else-if

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-bind

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

v-on 事件

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按钮</button>
    <!--<button @click="say">按钮</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

v-text读取文本不能读取html标签

 <div id="box">
     <div v-text="msg"></div>
 </div>

 <script>
     new Vue({
         el: "#box",
         data(){
             return {
                 msg:"11111"
             }
         },
         methods: {
             say() {
                 alert(111);
             }
         }
     })
 </script>

v-html  能读取html标签

<div id="box">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"<h1>121212</h1>"
            }
        },
        methods: {
            say() {
            }
        }
    })
</script>

v-class 类名

 <style>
         .red {

             background: red;
         }

         .blue {
             width: 100px;
             height: 100px;
             background: blue;
         }

     </style>

 <div id="box">
     <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
     <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
     <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->

 </div>

 <script>
     new Vue({
         el: "#box",
         data(){
             return {
                 isred:false
             }
         }
     })
 </script>

v-style  与v-class用法大致一样  这个我就不写了

v-once  与我下边的例子  就是  加载一次  如果用到事件中就是事件只执行一次（@click.once="show"）

<div id="box">
    <div v-once>{{msg}}</div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"qwdqwdqwd"
            }
        }
    })
</script>

v-cloak防闪烁

<div id="box">
    <div v-cloak="">欢迎--{{msg}}</div>
</div>

<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

v-pre  把标签内部的元素原位输出

<div id="box">
    <div v-pre>欢迎--{{msg}}</div>
</div>

<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

接下来就是一个总结了

 vue 是什么

 简介型的javascript框架    个人开发 (刘雨溪)

     特点：mvvm       m=mvc   module 模型   v=view 视图    c=controller  控制器
          mvvm       m=mvc   module 模型   v=view 视图     vm (视图与数据之间的传递)
          vue1 双向数据绑定   vue2 单向数据流
          单页面应用

 v-model   数据绑定
 data  返回对象用 return

 v-for   循环   格式  v-for="字段名 in(of) 数组json"

 v-show   显示 隐藏     传递的值为布尔值  true  false  默认为false

 v-if   显示与隐藏     和v-show对比的区别 就是是否删除dom节点   默认值为false

 v-else-if  必须和v-if连用

 v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误

 v-bind  动态绑定  作用： 及时对页面的数据进行更改

 v-on 绑定事件  函数必须写在methods里面
 @click  快捷方法

 v-text  解析文本

 v-html   解析html标签

 v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'

 v-once  进入页面时  只渲染一次 不在进行渲染

 v-cloak  防止闪烁

 v-pre  把标签内部的元素原位输出