2.Vue
2.1 简介
是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.2 常用操作
9.1.1.1. v-bind
- 指令的作用:给页面中标签的属性动态绑定值
- 指令带有前缀 v- ,用插值表达式 {{ }} 进行数据渲染,简写的形式就是一个冒号( : )
<h3 v-bind:title = "aaa">{{name}}</h3>
<h3 :title="aaa">{{name}}</h3>//注意冒号和title之间不能有空格
9.1.1.2. v-model
- 双向数据绑定指令,表单项中的内容发生改变,vue 中定义的数据就跟着发生改变;
- vue 中定义的数据发生改变,则表单项中的内容也跟着发生改变。
单选:<input type="radio" v-model="user.sex" value="男">男
<input type="radio" v-model="user.sex" value="女">女
9.1.1.3. v-on:click
- v-on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法,可以缩写为 @click
- v-on 可以简写为 @
<button @click="search()">查询</button>
9.1.1.4. .prevent
- 修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
- .prevent 修饰符告诉 v-on 指令代表阻止表单提交的默认行为
<form action="save" v-on:submit.prevent="onSubmit"/>
9.1.1.5. v-if | v-show | v-for
- v-if , v-else ,v-show是条件渲染
- v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
- 需要非常频繁地切换,使用 v-show 较好;运行时条件很少改变,使用 v-if 较好。
<input type="checkbox" v-model="flag">同意使用协议
<h3 v-if="flag">if</h3>
<h3 v-else>else</h3>
<h3 v-show="flag">show</h3>
flag:false
- v-for:列表循环指令
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.username}}</td>
</tr>
9.1.1.6. 组件
- 组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
- 局部组件 or 全局组件
<syx></syx>
9.1.1.7. 生命周期
- create ->mount ->update
- 生命周期方法会自动执行,不需要单独调用
- 最常用的是create
- vue创建对象意思是data,method执行
beforeCreate() | 创建vue对象之前执行 |
created() | 创建vue对象之后执行 |
beforeMount() | 浏览器给页面渲染数据之前执行 |
mounted() | 浏览器页面数据渲染完之后执行 |
下面的生命周期方法,在页面发生一些改动时会自动执行 | |
beforeUpdate() | 浏览器没有渲染到页面之前执行 |
updated() | 浏览器已经渲染完页面之后执行 |
9.1.1.8. 路由
- Vue的路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页 Web 应用,Vue.js 路由需要载入 vue-router 库。
- 通过路由进行页面跳转,相当于之前学习的超链接
-
- 定义路由组件
- 定义路由
- 创建router 实例
- 挂载路由实例
<router-link to="/welcome">首页</router-link>
<router-view></router-view>//指定路由组件内容
const Welcome = {template:'<div>首页</div>'}// 1. 定义路由组件
const routes = [// 2. 定义路由
{path:'/welcome',component:Welcome},
]
const router = new VueRouter({// 3. 创建router 实例
routes//名字一样,直接返回
})
router