介绍
Vue 是一个专注于前端 UI 的框架。
它的主要能力是:
- 声明式绑定。包括数据绑定、事件绑定。
- 基于组件的编程。让开发者可以把整个应用分为若干组件,从而达到分而治之的目的。
实例
🌰:counter
有一个标签显示数字 0,当点击按钮 “+”,数字会每次加 1。
<template>
<div>
<span>{{count}}</span>
<button @click="inc">+</button>
</div>
</template>
<script>
export default {
name: "count",
data() {
return {
count: 0
};
},
mounted() {},
methods: {
inc() {
this.count++;
}
}
};
</script>
<style scoped>
</style>
- 形如
{{key}}
的符号,是一种特殊的记号,表示的含义是:
从该标签所在的 Vue 实例内的 data 函数返回的对象内,查找名为 ‘key’ 的项目值,把这个值拿来填充 {{key}} 所占据的位置的内容。
这样 {{count}}
最终定位得到返回对象,{count: 0}
,从而得到值 0,并使用 0 填充到 <span>
标签的内容上。
然而 Vue.js 的数据绑定不仅仅意味着把 this.count 的值显示出来,也意味着当 this.count 被修改的时候,<span>
的内容会跟着更新。
这就是响应式编程,具体的魔法由Vue内部完成。开发者只要通过 {{}}
形式的声明,告诉 Vue 说,“我的这块内容应该显示 Vue 实例内的某个数据,并且当 Vue 实例数据更新时,这里的显示也要更新”即可。
- Vue 实例做的另外一件事,是托管了
data()
返回的数据对象。数据对象的访问本来的做法应该是:
this.$data.count
因为 Vue 实例的托管,你可以通过:this.count
访问达到 data 对象的 count。
@click
,它其实是 v-on:click 的简写。
指令是带有 v- 前缀的特殊 HTML 标签属性。指令的职责就是,当其表达式的值改变时,相应地将某些行为应用到DOM上。以下是指令的更加具体的解释:
- 指令能接受参数,在指令后以“:”指明。
- 指令能接受修饰符,是以“.”指明的特殊后缀。
- 指令能接受属性值,预期是单一JavaScript表达式。
🌰:todo 应用
- 点击按钮 add,把 input 内的文字作为内容创建一个新的 todo 条目。
- 点击按钮 X,删除对应的条目。
<template>
<div id="todo-app">
<h1>todo app</h1>
<input type="text" placeholder='new todo' v-model="todo" /><button @click="add">add</button>
<ul>
<li v-for="(item, index) in items" :key="item.index">
{{item}}
<button @click="rm(index)">X</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "count",
data() {
return {
items: [],
todo: ""
};
},
mounted() {},
methods: {
add: function() {
if (this.todo) {
this.items.push(this.todo);
this.todo = "";
}
},
rm: function(i) {
this.items.splice(i, 1);
}
}
};
</script>
<style scoped>
</style>
更多选项
参数 options 是一个对象,可以选择如下选项:
- data 函数成员
- methods 对象成员
- 模板 template
- 挂载元素 el
- 生命周期钩子
- props 属性声明
- computed 计算成员
- watch 监视成员
选项:watch 监视
watch 监视是一个对象,键是需要观察的表达式,值可以是:
- 回调函数
- 方法名
- 包含选项的对象
可以使用 回调函数
,来监视一个值的变化,像是这样:
<div id="demo">
<button @click="change">change</button>
<pre>{{ $data }}</pre>
</div>
<script>
new Vue({
el: '#demo',
data: {
thing: 1
},
watch: {
thing: function (val, oldVal) {
alert('a thing changed')
}
},
methods: {
change: function () {
this.thing = 5
}
}
})
</script>
通过 方法名
,可以把 watch 的函数移到 methods 内,像是这样:
<div id="demo">
<button @click="change">change</button>
<pre>{{ $data }}</pre>
</div>
<script>
new Vue({
el: '#demo',
data: {
thing: 1
},
watch: {
thing: 'changed'
},
methods: {
changed:function (val, oldVal) {
alert('a thing changed')
},
change: function () {
this.thing = 5
}
}
})
</script>
在 watch 成员内的监视代码,等同于执行了$watch
函数。因此以下代码其实和上一个案例等效:
<div id="demo">
<button @click="change">change</button>
<pre>{{ $data }}</pre>
</div>
<script>
new Vue({
el: '#demo',
data: {
thing: 1
},
mounted(){
this.$watch('thing',function(val, oldVal){
alert('a thing changed')
})
},
methods: {
change: function () {
this.thing = 5
}
}
})
</script>
采用 包含选项对象的模式
,还可以监视数组内对象的变化,像是这样:
<div id="demo">
<button @click="change">change</button>
<pre>{{ $data }}</pre>
</div>
<script>
new Vue({
el: '#demo',
data: {
things: [{foo:1}, {foo:2}]
},
watch: {
things: {
handler: function (val, oldVal) {
alert('a thing changed')
},
deep: true
}
},
methods: {
change: function () {
this.things[0].foo = 5
}
}
})
</script>
选项:computed 计算成员
计算属性内幕
🌰:
有一个 input 可以输入货币值,另外一个 span 会把货币加上一 ¥
符号。当货币值变化时,span 会跟着变化:
<div id="app">
<input v-model="money">
<span>{{RMB}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
money:1.10
},
computed:{
RMB:function(){
return '¥'+this.money
}
}
})
</script>
这里的 RMB 属性就是一个计算属性,依赖于 this.money,伴随后者的变化而变化。
✍️ 附录:
-
全局安装 vue-cli:
npm install --global vue-cli
。 -
进入你的项目目录,创建一个基于 webpack 模板的新项目:
vue init webpack vue-demo
。说明:
・Project name ⇒ 项目名称;
・Project description ⇒ 项目描述;
・Author ⇒ 作者;
・Vue build ⇒ 打包方式,回车即可;
・Install vue-router ⇒ 是否要安装 vue-router,所以 Y 回车;
・Use ESLint to lint your code ⇒ 是否需要 js 语法检测,目前我们不需要,所以 n 回车;
・Set up unit tests ⇒ 是否安装单元测试工具,目前我们不需要,所以 n 回车;
・Setup e2e tests with Nightwatch ⇒ 是否需要端到端测试工具,目前我们不需要,所以 n 回车; -
进入项目:
cd vue-demo
,安装依赖:npm install
。安装成功后,项目文件夹中会多出一个目录: node_modules
-
npm run dev
,启动项目。
🔗: