认识Vue
- Vue作者:尤雨溪
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 - 环境
- <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
入门程序
<!--快速入门-->
<h2 id="app">{{msg}}</h2>
<script>
//声明式渲染:数据和 DOM 已经被建立了关联,所有东西都是响应式的。
let app = new Vue({
el:"#app",
data:{
msg:"hello vue"
}
});
</script>
指令
- v-bind:
v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 href attribute 和 Vue 实例的 go property 保持一致”。
<!-- v-bind绑定元素的属性 -->
<a id="app2" v-bind:href="go">百度</a>
<script>
let app2 = new Vue({
el: "#app2",
data: {
go: 'https://www.baidu.com/'
}
});
</script>
- v-if v-else-if v-else
<!-- 选择操作v-if v-else v-else-if -->
<div id="app4">
<p v-if="flag === 'A'">A</p>
<p v-else-if="flag === 'B'">B</p>
<p v-else>C</p>
</div>
<script>
new Vue({
el: "#app4",
data: {
flag: "A"
}
}
);
</script>
- v-for
<!--循环与条件-->
<div id="app3">
<li v-for="(item,index) in items">{{index}}:{{item.msg}}</li>
</div>
<script>
let app3 = new Vue({
el: "#app3",
data: {
items: [
{msg: "A"},
{msg: "B"},
{msg: "C"},
]
}
});
</script>
- v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
<!--事件绑定-->
<div id="app5">
<button v-on:click="app5()">点击</button>
<p>{{msg}}</p>
</div>
<script>
new Vue({
el: "#app5",
data: {
msg: 0,
},
methods: {
app5: function () {
this.msg++;
}
}
});
</script>
- v-model 表单数据双向绑定
<!--表单数据处理,双向绑定-->
<form id="app6">
name:<input type="text" v-model="name" placeholder="请输入姓名..."><span>{{name}}</span><br/>
password:<input type="password" v-model="password" placeholder="密码..."><span>{{password}}</span><br/>
<textarea v-model="text"></textarea><span>{{text}}</span><br/>
<input type="radio" value="男" v-model="disabled" checked="checked" >
<input type="radio" value="女" v-model="disabled" ><span>{{disabled}}</span><br/>
<input type="checkbox" v-model="choose" value="a">a
<input type="checkbox" v-model="choose" value="b">b
<input type="checkbox" v-model="choose" value="c">c<span>{{choose}}</span><br/>
<select v-model="on">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select><span>{{on}}</span>
</form>
<script>
new Vue({
el: "#app6",
data: {
name: "",
password: "",
text: "",
disabled: "男",
choose: [],
on: ''
}
});
</script>
- v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
- v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
- v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
<!--组件-->
<div id="app7">
<zyx v-for="num in numbers" v-bind:value="num"></zyx>
</div>
<script>
//自定义组件,添加名称,创建模板
Vue.component('zyx',{
props: ['value'],
template: '<p>{{value}}</p>'
});
new Vue({
el: "#app7",
data:{
numbers: [1,2,3,4,5],
}
});
</script>
Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
下图展示了实例的生命周期
计算属性
<div id="app9">
<p>{{test1()}}</p>
<p>{{test2}}</p>
</div>
<script>
let vm = new Vue({
el: "#app9",
data: {
message: "zyx"
},
methods: {
test1: function () {
return Date.now();
}
},
computed: {
test2: function () {
return Date.now();
}
}
});
</script>
将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
自定义事件内容分发
<!--slot插件-->
<div id="app10">
<z>
<zyx-title slot="zyx-title" v-bind:title="title"></zyx-title>
<zyx-items slot="zyx-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="toRemove(index)" :key="index"></zyx-items>
</z>
</div>
<script>
Vue.component("z",{
template: '<div><slot name="zyx-title"></slot><ul><slot name="zyx-items"></slot></ul></div>'
//自定义组件和slot插槽
});
Vue.component("zyx-title",{
props: ['title'],
//props: [] 可以进行值的传入
template: '<div>{{title}}</div>'
});
Vue.component("zyx-items",{
props: ['item'],
template: '<li>{{item}}<button v-on:click="remove">删除</button></li>',
methods: { //定义事件分发
remove: function (index) {
this.$emit('remove',index)
}
}
});
new Vue({
el: "#app10",
data: {
title: '爱好',
items: ['篮球','篮球*2','篮球*3']
},
methods: {
toRemove: function (index) {
this.items.splice(index,1);
}
}
});
</script>
axios
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
<!--axios实现异步更新-->
<div id="app8" >
<p v-for="site in info.sites">{{site.name}}:{{site.info}}</p>
</div>
<script>
new Vue({
el: "#app8",
data(){
return {
info: {
name: null,
sites: [
{
name: null,info: null
}
]
}
}
},
mounted(){
axios.get('data.json').then(response => (this.info=response.data)).catch(function (error) {
alert(error);
});
}
});
</script>