简介
Vue.js是目前比较火的轻量级的前端框架之一。是一套构建用户界面的渐进式框架。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
var newVue=new Vue({
el:'#demo',
data:{
name:'curry',
age:18,
},
create:function(){
console.log("hello,"+this.name);
},
methods:{
showMsg(){
console.log("hello,"+this.name);
},
},
})
Vue包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：
- el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。
- data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
- created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。
指令
v-text
v-text: 用于更新绑定元素中的内容
<div v-text="text"></div>
//两者一样
<div>{{text}}</div>
v-html
v-html: 用于更新绑定元素中的html内容
<div v-html="html"></div>
一般情况下不会再页面使用html插入，以防止xss攻击。
v-show
v-show：根据表达式之真假值，切换元素的display CSS 属性
<div v-show=true>显示我</div>
v-if、v-else、v-else-if
根据表达式的值的真假条件渲染元素
//根据随机值来进行显示不同的内容
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-for
v-for是以item in items的形式的特殊语法，常用来绑定数据到数组来渲染一个列表
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' }
]
}
})
</script>
也可以将第二个参数作为键名
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
第三个参数为索引
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
v-on
v-on：绑定事件监听器
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
v-bind
v-bind:动态地绑定一个或多个特性，或一个组件 prop 到表达式。
<!-- 绑定一个属性 -->
<!-- 缩写 -->
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
v-model
v-model:随表单控件类型不同而不同。只有<input>
、<select>
、<textarea>
、components可以使用。
用于表单控件绑定。
<input v-model="remark"></input>
修饰符：
- .lazy - 取代 input 监听 change 事件
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
- .number - 输入字符串转为数字(如果原值的转换结果为 NaN 则返回原值)
<input v-model.number="age" type="number">
- .trim - 输入首尾空格过滤
<input v-model.trim="msg">
v-once
v-once：只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
