学习目标：
学习内容：
一、实例化Vue对象
1、作用域
2、数据模型
data：{
key： value
}
3、方法区
methods：{
定义方法
}
4、钩子函数
- 生命周期：加载模板-》渲染-》更新-》销毁
- 钩子函数：beforeCreate-》created-》beforeMounte-》amounted-》beforeUpdate-》updated-》beforeDestroy-》destoryed
二、插值表达式
1、花括号{}
2、v-text、v-html 单向绑定
<span v-text="数据名"><span v-html="<div>数据名</div>">
3、v-model 双向绑定
<input type="checkbox" value="java" v-model="language">java<br><input type="checkbox" value="ios" v-model="language">ios<br><input type="checkbox" value="php" v-model="language">php<br>您选择了：{{language.join(",")}}<hr>- 数据模型：
language=[]
三、事件
1、v-on/@
- 右键事件：v-oncontextMenu=“函数名”
- 右键事件：@contextMenu=“函数名”
- 按键事件：v-onkeyup.13=“函数名”(回车按键)
- 按键事件：@keyup.enter=“函数名”(回车按键)
- 组合按键事件：@keyup.enter.tab=“函数名”(按键可以无限加)
2、v-for
3、v-if、v-show
4、v-bind
- v-bind:class="{active:boolean}"
- 绑定样式，如果满足boolean条件则渲染active样式。
- 可以与静态样式并存
四、计算属性
- 计算属性中的函数不是传统意义上的函数，必须要有返回值，相当于数据模型
- 引用计算属性时，直接用{{属性名}}，不需要()
computed:{
func(){
方法体;
返回值;
},
...
}
五、监听
<!-- HTML -->
<input type="text" v-model="search">
<!--数据模型:空字符串-->
search:""
<!--监听器：执行相应操作，先打印新数据在打印旧数据-->
watch:{
search(newVal, oldVal){
console.log(newVal, oldVal);
}
}
六、组件化
1、全局组件
- 直接注册到Vue上，所有组件都可以使用
- 不需要再父组件上调用该组件，直接在页面内容中使用
<!--组件名：increment-->
<!--组件模板：template-->
<!--数据模型：data-->
Vue.component("increment", {
template: "<button @click='num++'>点我加一，{{num}}</button>",
data(){
return {
num: 0,
}
}
})
2、局部组件
<!--组件名：hello-->
<!--组件模板：template-->
<!--数据模型：data-->
const hello = {
template: "<div>我叫 {{name}}!!!</div>",
data(){
return {
name: "Jim",
}
}
}
<!--父组件：app-->
<!--绑定局部组件到父组件：components-->
const app = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
com0: hello,
}
})
3、父向子传递数据模型
- 使用子组件时自定义属性接收父组件的数据模型
- 子组件中用props接收自定义属性获得的数据模型
- 自定义属性以:开头为动态属性，获取的是JS数据，而不是字符串
<!--以上述子组件与父组件为例进行数据模型传输-->
<!--第一步：在使用子组件时自定义属性接收父组件数据模型-->
<increment :num1="num"> </increment>
<!--第二步：子组件中用props接收数据模型-->
props: [] <!--方式一：以数组方式接收-->
props: { <!--方式二：以对象方式接收-->
num1: {
type: Number,
default: 0
}
}
4、子向父通信
- 通过事件传递信息
- 使用子组件时自定义事件接收父组件函数
- 子组件中用$emit 接收父组件函数
<!--使用子组件时自定义事件接收父组件函数-->
<increment :num1="num" @incr1="incr"></increment>
<!--子组件在函数内使用$emit()调用自定义事件-->
Vue.component("increment", {
template: "<button @click='subIncr'>点我加一，{{num1}}</button>",
methods: {
subIncr(){
this.$emit("incr1");
}
},
props: {
num1:{
type: Number
}
}
}）
七、路由
1、组件安装
- npm install vue-router --save
- 引入
<script src="node_modules/vue-router/dist/vue-router.js"></script>
2、创建路由实例
const router = new VueRouter({
routes: [
{
path: "/login",
component: loginForm
},
{
path: "/register",
component: registerForm
}
]
})
3、注册路由到父组件
const app = new Vue({
el: "#app",
router
})
4、使用路由切换组件
- 创建router-link标签使用路由地址
- router-view标定路由展示位置
<div id="app">
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr>
<router-view></router-view>
</div>
|