1 vue概述
Vue.js是一套构建用户界面的渐进式框架。与其余重量级框架不同的是，Vue 采纳自底向上增量开发的设计。
什么场景应用VUE？
绝大多数以数据操作（增删改查）为主的PC端或挪动端我的项目都可用vue开发比方: 美团，饿了么，淘宝，知乎，公众点评，微博…
1.1 vue的MVVM设计思维
MVVM是一种设计思维，对晚期的web前端开发做了加强，将前端代码按其职责的不同分成了三局部：
- 界面(View)局部：由html+css形成，并容许在html,css中间接应用变量，表达式，语句等。
- 模型局部(Model)：个别为一个JSON格局的对象，用于存储view中须要的数据和函数。
- 视图模型(ViewModel):专门负责主动保护模型对象中的变量与界面中的变量同步。
因为有了ViewModel的存在，数据能够主动同步到界面上，简直防止了大量反复的编码！
2 插值语法
Vue.js 的外围是一个容许采纳简洁的模板语法来申明式地将数据渲染进 DOM 的零碎：
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})后果：
Hello Vue!3 vue常见的指令语法
v-bind
元素的属性值随着程序内容的变动而变动，可应用v-bind：
<元素 v-bind:属性名="变量或js表达式">
简化模式，根本语法如：
<元素 :属性名="变量或js表达式"><!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">v-show
v-if和v-else
v-else-if
v-for
为以后遍历的元素提供别名：
<div v-for="item in items">
{{ item.text }}
</div>v-on
@click为v-on:click的缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-on:click="handleClick(1)">{{ msg }}</h1>
<h1 @click="handleClick(2)">{{ msg }}</h1>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "Hello Vue."
},
methods:{
handleClick: function( who ){
this.msg = who+"- 你好，世界";
}
}
});
</script>
</html>v-html
v-text
v-model
你能够用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。
会疏忽所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值
v-model 在外部为不同的输出元素应用不同的 property 并抛出不同的事件：
- text 和 textarea 元素应用
valueproperty 和input事件； - checkbox 和 radio 应用
checkedproperty 和change事件； - select 字段将
value作为 prop 并将change作为事件。
实例测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
v-text:<div v-text="txt"></div>
v-html:<div v-html="html"></div>
v-if:
<div v-if="age>18">成年</div>
<div v-if="age<=18">未成年</div>
v-else:
<div v-if="age>18">成年</div>
<div v-else="age<=18">未成年</div>
v-else-if:小于60不及格，60-90及格，90-100优良
<div v-if="score>=90">优良</div>
<div v-else-if="score>=60">及格</div>
<div v-else="score<60">不及格</div>
v-show:
<div v-show="age>18">一枝老花</div>
v-for:(foreach,o代表以后对象，每次从数组中获取一个值，寄存在中)
<div v-for="o in colors">{{o}}</div>
<div v-for="(a,b,c,) in person">{{a}}，{{b}}，{{c}}</div>
<div v-for="(v,k,i,) in person">{{i}}，{{k}}，{{v}}</div>
<div v-for="(v,k,i) in animal">{{cat}}</div>
object对象：
<div v-for="p in person">{{p}}</div>
<div>{{person.name}}</div>
<div>{{person.tostring()}}</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
txt:"这是一个文本",
html:"<div style = 'font-size:26px'>这是一个大字</div>",
age:17,
score:62,
colors:['red','blue','green'],
person:{
name:"jack",
age:20,
address:"北京欢迎您",
tostring:function(){
return this.name+","+this.age;
}
},
animal:{
name:"dog",
age:2,
color:"red",
cat:{
name:"猫咪"
}
}
}
})
</script>
</html>
后果：
发表回复