vue前端框架（MVVM 模型：Model-View-ViewModel）
jquery 是 获取元素，完成特效；
vue 是 方便操作 ，控制数据 ，也可完成特效
vue.js
script src 导入
V，view 视图模板
div:
{{ message }}
script： vue.js要控制器的内容范围，必须先通过id来设置。
vue核心对象vm实例化：
var vm = new Vue({ // VM 时刻保证视图模板中的数据和data 数据一致 双向绑定 连接 V 和 M
el:'#d1', // vue 操作的元素 选择符
data:{ //保存数据 M，model 模型
message:'hello world',
}
})
注意：
一个网页多个vue对象，名称 vm1 ， vm2，一个vue对象负责一个特殊功能，js代码区分大小写
标签 一定 要在vue代码的前面，否则，识别不到 或者 window.onload = function(){...}
console.log(vm.$el)
console.log(vm.$.data)
console.log(vm.$data.message)
console.log(vm.message) message 是 data 里的数据，可以直接 点 .
1 显示数据：注意：要在el指定的标签里
普通显示纯文本数据，{{ }} {{ num + 1}} {{ message.toUpperCase }} js内置的方法可以使用 三元表达式：{{ num2>num1?num2:num1 }}
显示标签文本，v-html = 'img' , data：'img' 的包含标签的文本就可以显示了，
表单框中显示的数据: v-model = 'name',标签属性；data 数据： ’name':'aaa'，修改文本内容， data 里的数据也发生了改变，即网页其它引用这个数据 的地方 全部都改了。
2 常用指令：
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
vue1.x写法 vue2.x的写法
vue1.x写法 vue2.x的写法
v-html ----> v-html
{{ 普通文本 }} {{普通文本}}
v-bind:属性名 ----> :属性 为了让 vue 识别这个属性
v-on:事件名 ----> @事件名
2.1 操作属性：
格式：
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写
2.2 事件：
data:{
str1: "hello",
num: 20,
price: 7.1,
url1: "http://www.baidu.com",
url2: "http://www.taobao.com"
}
methods:{
change(){ // change:function(){}
this.type = 'text'
}
}
事件：@事件名：@click 1.x: v-on:事件名
@click = "change" 需要methods @click="goods.num++" 直接的方法，函数
绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
@blur ---> onblur
@click ---> onclick
data:{
goods:{
num:0
}
}
methods:{
if(this.goods.num--<1){} 这里是执行了 -- 的 然后进行比较
if(this.num<=1){ // 当目前的数字是0，那么显示就是0了，如果不是0，就减去1
this.num=0;
else{
this.num--;
}
}
2.3 操作样式： :style 不建议用
例子：隔行变换颜色
<tr :bgcolor="index%2==0?'#ffaaaa':'#aaaaff'" v-for="obj,index in goods_list">
<td>{{obj.name}}</td>
<td>{{obj.num}}</td>
<td>{{obj.price}}</td>
<td>{{index}}</td>
</tr>
总结：在标签里，要想通过 vue 操作标签的属性，就要把属性前 加 : ,这样才能识别属性。
在标签里，属性值要用 引号 括起来，其中的 变量 运算 等都不需要 {{}} ， 引号等包裹，直接写就好了。在这个例子中，颜色值当然要引号，，，
类：data里的属性值 没引号；style：data里的属性值有引号；
1 操作类：
:class = 值 或 对象
格式：
<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组
:class = "{cla1:true}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
color: red;
border: 1px solid #000;
}
.box2{
background-color: orange;
font-size: 32px;
}
</style>
</head>
<body>
<div id="box">
<!--- 添加class类名，值是一个对象
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
-->
<p :class="{box1:myclass1}">一个段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一个段落</p>
</div>
<script>
let vm1=new Vue({
el:"#box",
data:{
myclass1:false, // 布尔值变量如果是false，则不会添加对象的属性名作为样式
myclass2:true, // 布尔值变量如果是true，则不会添加对象的属性名作为样式
},
})
</script>
<!-- 上面的代码可以:class的值保存到data里面的一个变量，然后使用该变量作为:class的值 -->
<style> 常用
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app">
<button @click="mycls.box4=!mycls.box4">改变背景</button>
<button @click="mycls.box5=!mycls.box5">改变字体颜色</button>
<p :class="mycls">第二个段落</p>
</div>
<script>
let vm2 = new Vue({
el:"#app",
data:{
mycls:{
box4:false,
box5:true
},
}
})
</script>
<!-- 批量给元素增加多个class样式类 -->
<style>
.box6{
background-color: red;
}
.box7{
color: green;
}
.box8{
border: 1px solid yellow;
}
</style>
<div id="app2">
<p :class="[mycls1,mycls2]">第三个段落</p>
</div>
<script>
let vm3 = new Vue({
el:"#app2",
data:{
mycls1:{
box6:true,
box7:true,
},
mycls2:{
box8:true,
}
}
})
</script>
</body>
</html>
:值： fc变量，'red',
属性的写法： 有横线的加引号，或者backgroundColor
或 数组 [cla1,cla2,cla3] 添加多个样式
或 三元表达式 "bool?'box1':'' " 满足条件 样式 1 否则 样式 2 比如 disabled
2 操作 style
传值：值是json对象
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
传对象：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
值是数组：
<div v-bind:style="[style1, style2]"></div>
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
<span @click="num=0" :class="num==0?'current':''">国内新闻</span>
<span @click="num=1" :class="num==1?'current':''">国际新闻</span>
<span @click="num=2" :class="num==2?'current':''">银河新闻</span>
<div class="list" :class="num==0?'active':''">国内新闻列表</div>
<div class="list" :class="num==1?'active':''">国际新闻列表</div>
<div class="list" :class="num==2?'active':''">银河新闻列表</div>
3 判断：条件渲染
v-if v-else v-else-if v-if="num == 1"
条件成立，就显示标签 直接去掉了标签 dom操作remove
v-show 通过display:none属性 显示隐藏属性 和 v-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数据：
data:{
num:2
}
4 循环：列表渲染
data:{
goods_list:[...字典等]}
v-for="goods in goods_list"
v-for="goods,index in goods_list"
参数1，参数2 ： goods 列表的每个值， index 索引
列表：
<li v-for="value，index in book">{{value}}</li> 值 和 索引
字典：
<li v-for="attr, value in book">{{attr}}:{{value}}</li> key 和 value