基本语法

1.基本数据渲染和指令

data: {
 content: '我是标题',
 message: '页面加载于 ' + new Date().toLocaleString()
}

<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
 {{content}}
</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
 {{content}}
</h1>

2.双向数据绑定

data: {
 searchMap:{
 keyWord: 'calf'
 }
}

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>

3.事件

data: {
 searchMap:{
 keyWord: 'calf'
 },
 //查询结果
 result: {}
},
methods:{
 search(){
	 console.log('search');
	 this.result = {
	 "title":"calf",
	 "site":"http://www.baidu.com"
 }
}


<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的
方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4.修饰符

data: {
 user: {}
}

<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的
event.preventDefault()：
 即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
 <label for="username">
 <input type="text" id="username" v-model="user.username">
 <button type="submit">保存</button>
 </label>
</form>

methods: {
 onSubmit() {
 if (this.user.username) {
 console.log('提交表单')
 } else {
 alert('请输入用户名')
 }
 }
}

5.条件渲染

data: {
 ok: false
}

<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>


<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销
毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会
开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基
于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频
繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.列表渲染

<!-- 1、简单的列表渲染 -->
<ul>
 <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
 <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
 <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
 </ul>

data: {
 userList: [
 { id: 1, username: 'helen', age: 18 },
 { id: 2, username: 'peter', age: 28 },
 { id: 3, username: 'andy', age: 38 }
 ]
}

<!-- 2、遍历数据列表 -->
<table border="1">
 <!-- <tr v-for="item in userList"></tr> -->
 <tr v-for="(item, index) in userList">
 <td>{{index}}</td>
 <td>{{item.id}}</td>
 <td>{{item.username}}</td>
 <td>{{item.age}}</td>
 </tr>
</table>

组件(Component)

1、局部组件

var app = new Vue({
 el: '#app',
 // 定义局部组件，这里可以定义多个局部组件
 components: {
 //组件的名字
 'Navbar': {
 //组件的内容
 template: '<ul><li>首页</li><li>学员管理</li></ul>'
 }
 }
})

<div id="app">
 <Navbar></Navbar>
</div>

2.全局组件

// 定义全局组件
Vue.component('Navbar', {
 template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<div id="app">
 <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
 var app = new Vue({
 el: '#app'
 })
</script>

实例生命周期

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
 console.log(this.message) //undefined
 this.show() //TypeError: this.show is not a function
 // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
 console.log(this.message) //床前明月光
 this.show() //执行show方法
 // created执行时，data 和 methods 都已经被初始化好了！
 // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //{{ message }}
 // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //床前明月光
 // 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

路由

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

<div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/">首页</router-link>
 <router-link to="/student">会员管理</router-link>
 <router-link to="/teacher">讲师管理</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>

//js
<script>
 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Welcome = { template: '<div>欢迎</div>' }
 const Student = { template: '<div>student list</div>' }
 const Teacher = { template: '<div>teacher list</div>' }
 // 2. 定义路由
 // 每个路由应该映射一个组件。
 const routes = [
 { path: '/', redirect: '/welcome' }, //设置默认指向的路径
 { path: '/welcome', component: Welcome },
 { path: '/student', component: Student },
 { path: '/teacher', component: Teacher }
 ]
 // 3. 创建 router 实例，然后传 `routes` 配置
 const router = new VueRouter({
 routes // （缩写）相当于 routes: routes
 })
 // 4. 创建和挂载根实例。
 // 从而让整个应用都有路由功能
 const app = new Vue({
 el: '#app',
 router
 })
 // 现在，应用已经启动了！
</script>