一 vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

　　1.Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

　　2.View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

　　3.ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，

　　　　负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

二.大致的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        // 创建vm对象
        var vm = new Vue({
            el: "#app",
            data: {
                name:"大标题",
                age:16,
            },
        })
    }
    </script>
</head>
<body>
    <div id="app">
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <h1>{{name}}</h1>
        <p>{{age}}</p>
        <!-- 在表单输入框中显示数据要使用v-model来完成 -->
        <input type="text" v-model="name">
    </div>
</body>
</html>

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}

2. 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值

　　　则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

3. 双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.

　　v-html必须在html标签里面作为属性写出来.

<span v-html="img"></span>
<script>
let vm = new Vue({
el:".app",
data:{
img:'<img src="images/shendan.png">',
}
})
</script>

4.在输出内容到普通标签的使用{{ }}还支持js代码。

　　<h1>{{str1.split("").reverse().join("")}}</h1>

5. 支持js的运算符
　　<h1>{{num1+3}}</h1>

6.三元运算符,类似于python里面的三元表达式
　　三元运算符的语法:
　　　　判断条件 ? 条件为true : 条件为false的结果

　　　　<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>

　　python 三元表达式[三目运算符]的语法:
　　　　a if 条件 else b
7 .图片标签

<span v-html="img"></span>
<img :src="img2" alt="" width="200px">  <!-- 冒号：表示 设置属性 -->

data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               img2:'img/1.png' , //用设置属性的方法  :src='img2'
           }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <span v-html="img"></span>
    <img :src="img2" alt="" width="200px">  <!-- 冒号：表示 设置属性 -->
    <img v-bind:src="img2" width="50">  <!--1.0版本用  v-bind： 设置属性-->
</div>

<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               img2:'img/1.png' , //用设置属性的方法  :src='img2'
           }

       })

    }
</script>

</body>
</html>

图片标签

常用指令

1.指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

　　在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

　　指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

vue1.x写法 ------> vue2.x的写法
　　v-html ------> 　　　　{{ }}
　　v-bind:属性名 ----> :属性表示：设置属性
　　v-on:事件名 ----> @事件名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <span v-html="img"></span>
    <p v-html="{{title}}"></p>
    <img v-bind:src="img2" width="50">  <!--1.0版本用  v-bind： 设置属性-->
    <button v-on:click="func">点击</button>  <!-- 点击事件  -->
    <button @click="(num<10)?(num):(num-10)">点击{{num}}</button>  <!-- 点击事件  使用了三元运算符  -->
</div>

<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               title:"hello world",
               num:10
           },
           methods:{
               func:function () {
                   alert("你点我干嘛！");
               }
           }


       })

    }
</script>

</body>
</html>

2. 操作属性

格式：

<标签名 :标签属性="data属性"></标签名>

<p :title="str1">{{ str1 }}</p>      <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a>       <!-- v-bind是vue1.x版本的写法 -->

3.事件绑定

有两种写法，@事件名和 v-on:事件名

1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
　　@submit ---> onsubmit
　　@focus ---> onfocus

案例1 ：

　　知识点：

　　　　1. v-model input 框

　　　　2. @click 点击事件

　　　　3. 三元运算符

核心代码：

<button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               num:10
           }

       })

    }
</script>
<div id="app">

    <button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div>

</body>
</html>

商品增减

4 操作样式

1.控制标签class类名

格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组

添加class类名，值是一个对象

<style>
   .box1{color: red;border: 1px solid #000;}
   .box2{background-color: orange;font-size: 32px;}
</style>


<!---直接给标签设置class属性时，用的是  单花括号  -->
    <p :class="{box1:mycls1}">段落一</p>
    <p @click="mycls3=!mycls3" :class="{box2:mycls3,box1:mycls2,}">段落一</p>  

data:{  // data 相当于  model
         mycls1:false, // class属性设置是 bool
         mycls2:true,
         mycls3:true
    }

{
class类1:布尔值变量1,
class类2:布尔值变量2,
}

2. 一个属性间的来回切换

  <style>
    .box4{
        background-color: red;
    }
    .box5{
        color: green;
    }
    </style>
<div id="app2">
    <!---通过点击事件来回的切换样式 ->
    <!---给某个标签来回切换样式     点击事件，对样式进行取反 ，再给某个标签设置该样式就可以来回切换该样式 -->
    <button @click="mycls.box5=!mycls.box5">改变背景</button>
    <button @click="mycls.box4=!mycls.box4">改变字体颜色</button>   <!--mycls3=!mycls3 表示取反 ，用于来回在该属性之间进行切换-->
    <p :class="mycls">你好啊</p>
</div>
<script>
    let vm2=new Vue({
        el:"#app2",
        data:{

            mycls:{
                box4:false,
                box5:true
            }
        }
    })
</script>

3. 批量给元素增加多个class样式类

<style>
    .box4{
        background-color: red;
    }
    .box5{
        color: green;
    }
  </style>


<!-- 批量给元素增加多个class样式类 -->
    <style>
    .box6{background-color: red;}
    .box7{color: green;}
    .box8{border: 1px solid yellow;}
    </style>

<div id="app3">
   <p :class="[mycls1,mycls2]">第3段落</p>
</div>
<script>
    let vm3=new Vue({
        el:"#app3",
        data:{

            mycls1:{
                box6:false,
                box7:true
            },
            mycls2:{
               box8:true
            }
        }
    })
</script>

2 控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中

<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
activeColor: 'red',
fontSize: 30
}

格式2：值是对象变量名，对象在data中进行声明

<div v-bind:style="styleObject"></div>

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

格式3：值是数组

<div v-bind:style="[style1, style2]"></div>

data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
       .box1{color: red;border: 1px solid #000;}
        .box2{background-color: orange;font-size: 32px;}
    </style>
</head>
<body>

<!--方式一-->
<div id="box1">
    <p :style="{color:mycolor,backgroundColor:mybg}">第一段内容</p>

</div>

<br>
<script>

    var vm1= new Vue({
        el:"#box1",
        data:{
            mycolor:'red',
            mybg:'pink'
        }
    })

</script>


<!--方式二-->
<div id="box2">
    <p :style="mystyle">第一段内容</p>

</div>

<br>
<script>

    var vm2= new Vue({
        el:"#box2",
        data:{
            mystyle:{
                color:"red",
                backgroundColor:"pink"
            }
        }
    })

</script>


<!--方式三：-->
<div id="box3">
    <div :style="[mystyle,mystyle2]">第一段内容</div>

</div>

<br>
<script>
    var vm3= new Vue({
        el:"#box3",
        data:{
            mystyle:{
                color:"red",
                backgroundColor:"pink"
            },
             mystyle2:{
                height:"400px",
                width:"400px"
            }

        }
    })

</script>

例子

3 条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

1. v-if

<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data:{
ok:false // true则是显示，false是该标签不会出现，不只是隐藏
}

2 v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

data:{
ok:false // true则是显示，false是隐藏
}

3 v-else-if

<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>

data:{
num:2
}

4 v-show

用法和v-if大致一样，区别在于2点：

1. v-show后面不能v-else
2. v-show隐藏元素时，使用的是display:none来隐藏的，

　　而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="box">
       <p v-if="is_login">欢迎再次登录我们网站</p>
       <p v-else><a href="">注册</a><a href="">登录</a></p>


        <p v-if="num%3==0">这个数能被3整除</p>
        <p v-else-if="num%5==0">这个数能被5整除</p>
        <p v-else-if="num==1">这个数为{{num}}</p>
        <p v-else>你好</p>
        <!--v-show 符合条件就展示 ，不符合条件就隐藏 -->
        <p v-show="num==3">这个数为3</p>
        <p v-show="num">这个数为3</p>
    </div>

</body>

<script>
    var vm =new Vue({
        el:'#box',
        data:{
            // is_login:true,
            is_login:false,
            num:3
        }


    })
</script>
</html>

v-if v-else v-show

5 列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：

<ul>
<!--i是列表的每一个元素-->
<li v-for="i in list">{{i}}</li>
</ul>

数据是对象：

<ul>
<!--i是每一个value值,j是每一个键名-->
<li v-for="(i, j) in obj1">{{j}}:{{i}}</li>
</ul>

实用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               num:10
           }

       })

    }
</script>
<div id="app">

    <button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div>

</body>
</html>