Vue 框架
Vue 框架
渐进式框架，采用自底向上的增量开发，Vue关注视图层。采用MVVM双向数据绑定，改变数据影响元素，反之亦然
一. 基础语法：
1. 如何使用Vue：
1）、引入Vue的核心JS文件，Vue会被当做全局变量使用
<script type="text/javascript" src="js/vue.js" ></script>
2）、准备Dom结构
<div id="app">
</div>
3）、实例化组件
通过el属性，挂载元素，绑定id为app的html元素
通过data属性，定义数据，可以在html代码段中显示的数据
var vue = new Vue({
el:"#app",
data:{
msg:"Hello Vue！"
}
});
4）、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<div id="app">
<!--双花括号取值-->
{{msg}}
</div>
2. JavaScript 表达式
在Vue模板中，提供了完全的 JavaScript 表达式支持
<!--2、准备Dom结构-->
<div id="app">
<!--双花括号取值-->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
</div>
注意，只能在模板中写入表达式，而不能使用js语句，所以下面的写法会
报错。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
二、指令
指令 (Directives) 是带有 v- 前缀的特殊属性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1）文本渲染
1、v-text
在 html 中插入数据，跟{{}}功能一致
2、v-once
数据只会更新一次，下次更新数据不影响dom
3、v-html
对文本内容进行解析，生成 html 结构并渲染
$$
$$
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本渲染指令</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<!--简写-->
<div>{{msg}}</div>
<hr />
<div v-once>{{txt}}</div>
<hr />
<div>{{tpl}}</div>
<div v-html="tpl"></div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"Hello",
txt:"Hello Vue",
tpl:"上海
"
}
});
</script>
</html>
2）class 与 style 绑定
1、v-bind
v-bind 指令可以绑定元素的属性，动态给属性赋值。比如：v-bind:class、v-bind:style、v-bind:href 形式。
v-bind 的简写形式：v-bind: 简化为 : ，上边的形式可以改写成 :class、:style、:href
<html>
<head>
<meta charset="UTF-8">
<title>bind指令</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div title="你好">Hello</div>
<hr />
<div v-bind:title="msg">你觉得Vue怎么样？</div>
<div :title="msg">你觉得Vue怎么样？</div>
<hr />
<img :src="src"/>
<a :href="href">Vue</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"Vue is very good",
src:"https://cn.vuejs.org/images/logo.png",
href:"https://cn.vuejs.org/"
}
});
</script>
</html>
2、class 绑定
通过 v-bind:class 一个对象，以动态地切换 class\
绑定DOM对象的class样式有以下几种形式：
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class
对象和数组绑定的区别：
对象可以控制class的添加和删除；数组不能控制删除
<div id="app">
<div class="red green item">Vue</div>
<hr />
<div :class="{red:true,green:false,item:true}">Vue</div>
<div :class="classObj">Vue</div>
<div :class="classList">Vue</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
classObj:{
red:true,
green:false,
item:true
},
classList:["red","item","test"]
}
});
</script>
3、style绑定
绑定形式跟class一致：
使用内联对象Object
直接传入对象styleObject
使用数组对象styleList
<div id="app">
<div style="color:red;font-size: 30px;">我是文本</div>
<div :style="{'color':'red','font-size':'30px'}">我是文本</div>
<div :style="styleObj">我是文本</div>
<div :style="[styleObj,styleObj2]">我是文本</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
styleObj:{
'color':'red',
'font-size':'30px',
'font-family':'楷体'
},
styleObj2:{
'background':'pink'
}
}
});
</script>
3）事件处理
1、监听事件
用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
使用形式： v-on:事件名
简写：@事件名
<div id="app">
count:{{count}}
<button v-on:click="count++">add</button>
<button @click="count--">down</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
count:0
}
});
</script>
2、方法事件处理器
一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。需要在 methods 属
性中定义方法，然后 v-on 引用对应相关的方法名。
<div id="app">
count:{{count}}
<button @click="addCount()">add</button>
<button @click="downCount">add</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function(){
this.count++;
},
downCount:function(){
this.count--;
}
}
});
</script>
3、$event 对象
在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入。
<div id="app">
count:{{count}}
<button @click="addCount($event)">add</button>
<button @click="downCount">down</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function(e){
console.log(e);
console.log(e.target.tagName);
this.count++;
},
downCount:function(){
this.count--;
}
}
});
</script>
4、事件修饰符
在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为） 或 event.stopPropagation()（阻止事件冒泡到父元素） 是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符
top ： 阻止event冒泡，等效于event.stopPropagation()
prevent ： 阻止event默认事件，等效于event.preventDefault()
capture ： 事件在捕获阶段触发
self ： 自身元素触发，而不是子元素触发
once ： 事件只触发一次
<div id="app">
<div @click="father">
<div @click="child">child</div>
</div>
<hr />
<!--stop ： 阻止event冒泡，等效于event.stopPropagation(-->
<div @click="father">
<div @click.stop="child">child</div>
</div>
<hr />
<!--prevent ： 阻止event默认事件，等效于event.preventDefault()-->
<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
<hr />
<!--capture ： 事件在捕获阶段触发-->
<div @click.capture="father">
<div @click.capture="child">child</div>
</div>
<!--self ： 自身元素触发，而不是子元素触发-->
<hr />
<div @click.self="father">
father
<div @click="child">child</div>
</div>
<hr />
<!--once ： 事件只触发一次-->
<div @click.once="child">child</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
},
methods:{
father:function(){
console.log("父元素...");
},
child:function(){
console.log("子元素...");
},
prevent1:function(){
console.log("666....");
}
}
});
</script>
5、键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.space
.up
.down
.left
.right
<div id="app">
<form action="http://www.shsxt.com">
<input v-on:keyup.enter="submit">
<!-- 只有在 keyCode 是 13 时调用 submit() -->
<input v-on:keyup.13="enterKey">
</form>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
},
methods:{
enterKey:function(){
console.log("enter...");
}
}
});
</script>
4) 条件渲染
1、v-if
当条件返回true时，执行
<div id="app">
<h3 v-if="seen">你能看见我!</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
seen:true
}
});
</script>
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
<div id="app">
<button @click="seen=!seen">切换</button>
<p>
<span v-if="seen">你能看见我!seen: {{seen}}</span>
<span v-else>seen: {{seen}}</span>
</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
seen:true
}
});
</script>
3、v-else-if
当满足条件时执行（要结合v-if一起使用）
年龄:12
年龄:18
不是 12 和 18
4、v-show
满足条件时显示，不满足隐藏
你能看见我!
< script>
var app = new Vue({
el:'#app',
data:{
seen:true
}
});
< /script>
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件 为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。
5）列表渲染
1、v-for
可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引
<div id="app">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
<hr />
<ul>
<li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li>
</ul>
<hr />
<ul>
<li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
type:"水果",
items:[
{name:'西瓜'},
{name:'苹果'},
{name:'菠萝'}
],
person:{
name:'Tim',
age:12,
love:'music'
}
}
});
</script>
2、key 属性
用 v-for 渲染列表时， 使用 key 属性给每个指定一个唯一的 ID 表示，那么可以在
下次数据渲染时，提高渲染速度。它默认用“就地复用”策略。
如果数据项的顺序被改变，重复 ID 的元素将会被再次使用，不会重新渲染。这个默认
的模式是高效的。需要用 v-bind 来绑定动态值 (在这里使用简写)：
key属性
- {{item.name}}
3、取值范围
v-for 也可以指定整数，用来重复多次使用模板。
<div id="app">
<ul>
<li v-for="i in 5">第 {{i}} 次</li>
</ul>
6）表单输入绑定
用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中
声明初始值
1、文本 text
<div id="app">
<input v-model="message" placeholder="输入..."/>
<p>message: {{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
});
</script>
2、复选框
单个使用时 v-model 是逻辑值：true 和 false，多个一起使用需要指定 value 值，
选中结果绑定 v-model 的数组。
<div id="app">
<input type="checkbox" v-model="checked">
<p>是否选中: {{checked}}</p>
<hr>
<input type="checkbox" value="HTML5" v-model="lesson">
<label>HTML5</label>
<input type="checkbox" value="JavaScript" v-model="lesson">
<label>JavaScript</label>
<input type="checkbox" value="Vue" v-model="lesson">
<label>Vue</label>
<p>多选结果：{{lesson}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
checked:'',
lesson:[]
}
});
</script>
3、单选框
<div id="app">
<input type="radio" value="yes" v-model="love">
<label>喜欢</label>
<input type="radio" value="no" v-model="love">
<label>不喜欢</label>
<p>是否喜欢: {{love}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
love:''
}
});
</script>
4、选择列表
<div id="app">
<select v-model="selected">
<option>西瓜</option>
<option>苹果</option>
<option>菠萝</option>
</select>
<h3>结果: {{selected}}</h3>
</div>
<script> var app = new Vue({
el:'#app',
data:{
selected:''
}
});
</script>
5、修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：
.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
.trim：去除数据的前后空格
<div id="app">
<p><input type="text" v-model.lazy="name">{{name}}</p>
<p><input type="text" v-model.number="age"></p>
<p><input type="text" v-model.trim="cont"></p>
<p><button @click="show();">显示值</button></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
name:"",
age:"",
cont:""
},
methods:{
show:function(){
console.log(this.name);
console.log(typeof this.age);
console.log(this.age);
console.log(this.cont);
}
}
});
</script>
</body>
三、组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
1、定义组件
Vue 自定义组件分为两种：全局组件 和局部组件 ，全局组件可以在任何地方引用，局部
组件只能在当前 Vue 实例使用
1）全局组件
使用Vue.component(tagName, options)来定义：
2）局部组件
在Vue实例中使用components属性来定义：
注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。
<div id="app">
<my-hello></my-hello>
</div>
<div id="root">
<!--使用组件-->
<my-hello></my-hello>
<my-hello></my-hello>
<my-hello></my-hello>
<!-- <my-hello/>--> <!--不推荐使用-->
<my-hello></my-hello>
<inner-hello></inner-hello>
</div>
</body>
<script type="text/javascript">
/*定义全局组件*/
Vue.component("my-hello",{
template:"Hello Vue
"
});
new Vue({
el:"#app"
});
new Vue({
el:"#root",
components:{
"inner-hello":{
template:"我是局部组件
"
}
}
});
</script>
</html>
2. is属性
在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到 当模板的html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:标签的外部：
<table id="app">
<tr is="my-hello"></tr>
</table>
</body>
<script type="text/javascript">
/*定义全局组件*/
Vue.component("my-hello",{
template:"Hello Vue
"
});
new Vue({
el:"#app"
});
</script>
3. 模板
1)直接使用字符串定义
2)使用
你可能感兴趣的:(Vue 框架)