Vue常用方法总结

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. 生命周期

1. 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