一、模版指令
通过模版指令(写在html中的)，即是html和vue对象的粘合剂。
- 数据渲染 v-text、v-html、{{}}
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-text更新元素的textContent，v-html更新元素的innerHTML，内容按普通 HTML 插入，不会作为 Vue 模板进行编译。如果想要title: 'TOMVC <sub>2.0</sub>'不以字符串形式显示，就可以使用v-html，<h2 v-html='title'></h2>
- 控制模块显示隐藏 v-if、v-show
<div id="view">
<p v-if='isShow'></p>
<p v-show='isShow'></p>
</div>
new Vue({
el: '#view',
data: {
isShow: true
}
});
v-if是直接不渲染该元素； v-show是通过display: none进行隐藏;
- 渲染循环列表 v-for
模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法。
<ul class="view">
// 遍历数组，取出每个元素
<li v-for='item in list'>
{{item.text}}
</li>
</ul>
<script>
var app = new Vue({
el: '.view',
data: {
list: [ // 数组
{text: '01、HTML'},
{text: '02、CSS'},
{text: '03、JavaScript'}
]
}
});
</script>
- 事件绑定 v-on
<div id="view4">
<input type="button" value="按钮" v-on:click='doThis' />
// 简写
<input type="button" value="按钮" @click='doThis' />
</div>
<script>
new Vue({
el: '#view4',
methods: {
doThis: function(){
alert('hello');
}
}
});
</script>
- 属性绑定 v-bind
Vue中不能直接使用{{ expression}}语法进行绑定html的标签，而是用它特有的v-bind指令，语法<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>。
由于v-bind 使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。
<div id="view">
<p :class='InfoClass'></p>
</div>
<script>
new Vue({
el: '#view',
data: {
imgSrc: 'm_3_100.png',
InfoClass: 'infoRed'
}
});
</script>
- 样式绑定 v-bind
对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。
经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。
<style>
.view{
width: 300px;
height: 30px;
border: 1px solid gray;
line-height: 30px;
text-align: center;
}
.active{ // 使能样式
color: red;
}
</style>
// 当isActive为true时，这个div就会添加类名active；当isActive为false时，这个div就会移出类名active；
<div class="view" :class='{active:isActive}'>
{{message}}
</div>
var app = new Vue({
el: '.view',
data: {
message: 'hello Vue.',
isActive: false
}
});
- 双向数据绑定 v-model
上面的例子基本都是单向的js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？
Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。
<div id="app">
<p>{{ message }}</p>
// 双向数据绑定
<input v-model="message">
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
二、Vue组件中重要选项
Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂载、销毁等过程进行js控制。
- data数据选项，代表vue对象的数据
创建的Vue对象中的data属性就是用来绑定数据到HTML的，Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: { // data数据选项
message: 'Hello Vue!'
}
})
- methods方法选项，代表vue对象的方法
方法中的 this 自动绑定为 Vue 实例。
<div id="view">
<input type="button" value="按钮" @click='doThis' />
</div>
<script>
new Vue({
el: '#view',
methods: { // methods方法选项
doThis: function(){
alert('hello');
}
}
});
</script>
- computed计算属性
在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求，另外放入太多的逻辑会让模板过重且难以维护。而计算属性，即属性可以是一个方法。
所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，在计算属性中定义的函数里面可以直接使用指向了vue实例的this。
<div class="view">
// 计算属性，好处在于会自动根据totalPrice显示不同内容
{{showStr}}
</div>
var app = new Vue({
el: '.view',
data: {
totalPrice: 18
},
computed: { // Vue对象的computed属性
// 计算属性，但该属性是一个方法
showStr: function(){
// this指向vue实例
if(this.totalPrice < 20){
return '金额小于20，没有优惠喔!'
} else {
return '金额大于20，免配送费!'
}
}
}
});
- watch监听选项，设置了对象的监听方法
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
var view2 = new Vue({
el: '#view2',
data: {
a: 1
},
methods: {
doSomething: function(){
this.a++;
}
},
watch: {
a: function(newvalue, oldvalue){
console.log(newvalue, oldvalue);
}
}
});
三、Vue实例的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
Vue实例生命周期.png
Vue提供的可以注册的钩子都在上图片的红色框标注:
-
beforeCreate: 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 -
created: 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 -
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。 -
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 -
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 -
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 -
beforeDestroy: 实例销毁之前调用，在这一步，实例仍然完全可用。 -
destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
四、Vue的全局API
- Vue.nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。即保证操作的DOM已经渲染。
Vue.nextTick(function () {
// DOM 更新完成，可以操作
})
- Vue.set
设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
Vue.set( object, key, value )
- Vue.use
加载插件
// 导入VueRouter
import VueRouter from 'vue-router';
// 加载插件(全局注册一样)
Vue.use(VueRouter);
- Vue. mount
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用Vue. mount手动地挂载一个未挂载的实例。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
});
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
五、组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。
- 如何划分组件
- 功能模块: select、pagenation...
- 页面区域划分: header、footer、sidebar...
- 全局扩展方法Vue.extend
Vue提供了一个全局的API，Vue.extend可以帮助我们对Vue实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的Vue实例了。 类似于继承的方式。
<script>
// 创建构造器
var Profile = Vue.extend({
// 新的对象的模板，所有子实例都会拥有此模板
template: '<p>{{firstName}} {{lastName}}</p>',
// 创建的Vue实例时，data可以是Object 也可以是Function，但是在扩展的时候，data必须是一个函数，而且要返回值
data: function () {
return {
firstName: '张三',
lastName: '张二蛋',
}
}
});
// 创建 Profile 实例，并挂载到一个元素上
new Profile().$mount('#mount-point')
// 或者下面这种写法
new Profile({
el: '#mount-point'
});
</script>
- 创建一个组件并注册使用
Vue提供了一个全局注册组件的方法：Vue.component。
使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素
<div id="view">
<!--组件直接跟普通的标签一样的使用-->
<my-title></my-title>
</div>
// 注册一个组件
Vue.component('my-title', {
// 模板选项设置当前组件，最终输出的html模板。注意：有且只有一个根元素。
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#view'
})
- 局部注册组件
不必在全局注册每个组件，有时需要注册一个局部模块。
<div class="view">
// 组件在注册之后，便可以在父实例的模块中以自定义元素
<my-components></my-components>
</div>
<script>
var Child = {
template: '<div>A custom component!</div>'
}
// 创建一个Vue实例
var app = new Vue({
el: '.view',
components: { // 局部注册组件(如果没有局部注册是不能使用的)
'my-components' : Child
}
});
</script>
- data必须是函数
通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。
<div class="view">
<my-title></my-title>
</div>
<script>
// 注册一个全局组件
Vue.component('my-title', {
template: '<h1> {{title}} </h1>',
data: function(){
return {
title: 'hello Vue!'
}
}
});
// 创建一个Vue实例
var app = new Vue({
el: '.view'
});
</script>
- 单文件组件的使用方式介绍 【项目开发都会是一个文件对应一个组件】
通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue可以通过Webpack等第三方工具实现单文件的开发的方式。
// Hello.vue组件
<template>
<h3>
标题: {{str}}
</h3>
</template>
<script>
export default {
data: function(){
return {
str: 'hello Vue!'
}
}
}
</script>
<style>
h3{
text-align: center;
}
</style>
<script>
// App.vue组件中使用Hello.vue组件
// 导入Hello组件
import Hello from './components/Hello';
export default {
// ...
components: { // 局部注册组件
Hello
}
}
</script>
<template>
// 使用自定义元素(Hello组件)
<hello></hello>
</template>
通过vue-cli脚手架构造项目
- 组件间调用 --- components
如果要使用某个组件，单纯通过import导入是不行的，还需要通过components进行注册才能使用。
// App.vue中
// 导入组件
import Header from './header'
import Footer from './footer'
new Vue({
// 组件需要注册之后才能使用
components:{
Header, Footer
}
})
// 在App.vue中
<header></header>
<footer></footer>
- 组件间通信 --- props (父组件给子组件传参)
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
// header.vue 子组件
new Vue({
props: ['message'], // 不同组件中的数据操作()
methods: {
doThis: function(){ // 子组件获取到父组件传递的参数this.message
console.log(this.message);
}
}
})
// props可以其他写法
props:{
seller:{ // 即是设置接收参数的数据类型
type: Object, // 参数的类型
// default 是设置默认值的
}
}
// app.vue 父组件
// 将字符串内容'hello world!'传递给子组件
<header message='hello world!'></header>
// 绑定data属性值
// <header :message='title'></header>
- 组件间通信 --- 自定义事件(子组件给父组件传参)
// app.vue 父组件
// 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
<component-b v-on:child-tell-me='getMsg'></component-b>
new Vue({
// ...
methods: {
// 'child-tell-me'对应触发的方法，即父组件获取子组件传递的参数msg
getMsg: function(msg){
console.log(msg)
}
}
})
// footer.vue 子组件
new Vue({
// ...
methods: {
// 在sendMsg方法中，即触发'child-tell-me'方法，并传递参数
sendMsg: function(msg){
this.$emit('child-tell-me', '你收到我发送的消息了吗?【componentB】')
}
}
})
六、Vue路由
对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用， 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案：vue-router; 建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。
-
vue-router的安装使用
1.CDN连接方式<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>2.npm 安装
npm install vue-router -
vue-router 入门
1.引入vue和vue-router(如果配合npm和webpack的话可以直接作为一个模块导入即可)<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>2.定义路由跳转的组件(或导入组件)
const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } 定义路由规则对象
// 每个路由path应该映射一个组件
const routes = [
{path: '/foo', component: Foo},
{path: '/Bar', component: Bar}
];
- 创建路由器对象
// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes，es6的新语法
});
- 创建和挂载根实例
const app = new Vue({
router
}).$mount('#app');
- 模板中编写路由跳转链接
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
注意: vue-router@2.x 只适用于 Vue 2.x 版本。 vue-router@1.x 对应于Vue1.x版本。
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
七、视频学习
如果想要对Vue做进一步的学习，可以查看视频课程，后续还会有vue进阶的实战视频喔！
vue入门基础
