Vue简介

　　1.JavaScript框架

　　2.简化Dom操作

　　3.响应式数据驱动

Vue基础

通过下面代码引用vue:

示例:

<!-- 引用vue -->  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script type="text/javascript">  
    var app = new Vue({  
        el:"#app",  
        data:{  
            message:"Hello Vue!"  
        }  
    })  
</script>  

编写一个简单Vue程序步骤:

1. 导入开发版本的vue.js
2. 创建Vue实例对象，设置el属性和data属性
3. 实际简洁的模板把数据渲染到页面上

el:挂载点

　　用于选中需要被vue渲染的部分，如: el:"#box"，样只会选中id为box中的内容进行渲染，" # "表示id选择器，el也可以选中其它css选择器，如: el:".red" 等等..

data: 状态|数据

　　可以在data里面定义一些数据变量(数组，对象，…)

插值:
　　{{ 10+20 }}  　　将数据渲染到页面元素中，不解析html标签

　　v-html 将数据渲染到页面元素中，可以解析html标签

vue指令

v-show

值为bool类型，为true表示显示元素，false表示隐藏元素(display:none)

v-if

值为bool类型，为true表示创建元素，false表示删除元素

v-bind

绑定属性，如 

动态绑定class:

三目写法:

对象写法:

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　classobj:{
　　　　　　red:true,
　　　　　　yellow: false, 
　　　　　　aaa:true
　　　　}
　　}

　　上面div将会同时应用red和aaa两个类样式，如果想不应用red样式，可以将classobj.red的值设置为false,该样式将不被应用。

数组写法:

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　classarr:["red", "a", "b" ]      //数组中存放类样式名
　　}

　　在数组中存在的样式都将被应用，通过数组的 pop()方法删除数组元素（删除样式），push()方法添加数组元素（添加样式）

v-bind可以简写为" : "号，如 

绑定style属性：

　　三目写法:   

　　　　这里注意，如果样式是background-color的话要写成backgroundColor才行，所有样式中 - 的都要这样写

　　对象写法: 　　

　　　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　　　styleobj :{
　　　　　　　　background: "red",
　　　　　　　　fontSize: "30px",  　　　　//对象属性就是需要应用的样式
　　　　　　}
　　　　}

　　数组写法:

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　stylearr:[]      //数组
　　}

　　添加样式 stylearr.push({ backgroundColor:"red" }) 通过这种形式添加样式，删除样式还是通过操作数组就行

条件渲染：

v-if 和 v-else 的使用，当v-if中的条件为假的时候显示v-else里面的内容

这个有什么用呢？比如：有些购物软件，当你购物车没有添加商品是会显示 购物车空空如也，添加商品后再展示商品。这种就可以用v-if和v-else来实现

代码:

html内容:

    <div id="box">  
        <div v-if="goods.length">  
            <h2>商品列表</h2>  
            <ul>  
                <li v-for="item in goods">{{ item }}</li>  
            </ul>

            <button type="button" v-on:click="goods.pop()">删除一个商品</button>  
        </div>

        <h2 v-else>商品空空如也!</h2>  
    </div>

js内容:

    <script type="text/javascript">  
        var vm = new Vue({  
            el:"#box",  
            data:{  
                goods:\["苹果", "鼠标"\]  
            }  
        })  
    </script>

数组中有元素时显示v-if的内容，单击删除按钮会从数组中删除一个元素，当数组中元素被删除时将显示v-else的内容

v-else-if 有v-if、v-else那肯定少不了v-else-if

v-else-if使用方式跟v-else使用差不多，如果v-if为false继续判断v-else-if

代码演示:

    <script type="text/javascript">  
        var vm = new Vue({  
            el:"#box",  
            data:{  
                num:2  
            }  
        })  
    </script>

只有条件 num===2 是为true的  所以页面显示的将是 2 ，还是挺好理解的

v-for

语法:

in 可以改成 of 也是可以使用的

index表示数组的索引

遍历数组或对象中的元素进行展示，一般配合列表使用

代码:

        <h2>遍历对象内容进行展示</h2>  
        <ul>  
            <li v-for="each in dataobj">{{ each }}</li>  
        </ul>  
    </div>

    <script type="text/javascript">  
        var vm = new Vue({  
            el:"#box",  
            data:{  
                datalist:\["111", "222", "333"\],

                dataobj:{  
                    name:"kk",  
                    age:18,  
                    sex:"男"  
                }  
            }  
        })  
    </script>