1、基本数据渲染和指令
1> 除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
data: {
content: \'我是标题\',
message: \'页面加载于 \' + new Date().toLocaleString()
}
//方式1
<!-- v-bind指令 单向数据绑定
这个指令一般用在标签属性里面，获取值
-->
<h1 v-bind:title="message">
{{content}}
</h1>
//方式2
<!--简写方式--> 推荐使用
<h2 :title="message">
{{content}}
</h2>
2、双向数据绑定
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
<body>
<div id="app">
<input type="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定-->
<input type="text" v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
searchMap:{
keyWord: \'LeavesCai7\'
}
}
})
</script>
</body>
3、事件操作
data节点中增加 result，增加 methods节点 并定义 search方法
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<body>
<div id="app">
<!--vue绑定事件-->
<button v-on:click="search()">查询</button>
<!--vue绑定事件简写--> 推荐使用
<button @click="search()">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
searchMap:{
keyWord: \'LeavesCai7\'
},
//查询结果
result: {}
},
methods:{//定义多个方法
search() {
console.log(\'search....\')
},
f1() {
console.log(\'f1...\')
}
}
})
</script>
</body>
4、修饰符
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
阻止事件原本的默认行为
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
即阻止表单提交的默认行为 -->
<body>
<div id="app">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
user:{}
},
methods:{
onSubmit() {
if (this.user.username) {
console.log(\'提交表单\')
} else {
alert(\'请输入用户名\')
}
}
}
})
</script>
</body>
5、条件渲染 重点
<body>
<div id="app">
<input type="checkbox" v-model="ok"/>是否同意
<!--条件指令 v-if v-else -->
<h1 v-if="ok">LeavesCai7</h1>
<h1 v-else>CaiLeaves7</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
ok:false
}
})
</script>
</body>
6、列表渲染 重点 最常用
<body>
<div id="app">
<ul>
<li v-for="n in 10"> {{n}} </li>
</ul>
<ol>
<li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
</ol>
<hr/>
<table border="1">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
userList: [
{ id: 1, username: \'helen\', age: 18 },
{ id: 2, username: \'peter\', age: 28 },
{ id: 3, username: \'andy\', age: 38 }
]
}
})
</script>
</body>
全局组件
定义全局组件：components/Navbar.js
// 定义全局组件
Vue.component(\'Navbar\', {
template: \'<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>\'
})
<script src="components/Navbar.js"></script>
生命周期
<body>
<div id="app">
hello
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: \'#app\',
data: {
},
created() {
debugger
//在页面渲染之前执行
console.log(\'created....\')
},
mounted() {
debugger
//在页面渲染之后执行
console.log(\'mounted....\')
}
})
</script>
</body>
路由
<!-- 必须顺序引入 -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<body>
<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>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<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>
</body>