Vue 学习笔记
vue对比jquery
vue
:mvvm
数据驱动影响视图 适用于复杂数据jquery
:mvc
视图塞入数据 适用于复杂视图动效
(其实都是js 的封装,以及对html 的扩展)
相关指令
v-text
等同大胡子效果 但是会转换为字符串
v-html
绑定html属性
<div id="app"> <div v-html="message"></div> </div> <script> new vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>
v-if
三兄弟 只会渲染判断为真的dom
v-show
绑定值的布尔值来判断是否显示 会渲染整个dom
只是会根据布尔只能判断是否增加display none
这个内联样式v-if
和v-show
的区别:v-if
有更高的切换消耗;v-show
有更高的初始渲染消耗;v-if
适合运营条件不大可能改变;v-show
适合频繁切换
v-for
: 循环
v-once
只会渲染一次 即使数据改变
v-bind
用来响应地更新html属性 使用场景:绑定接口请求得到的数据 简写: : ,可以绑定class和内联样式
<style> .class1 { background: #444; color: #eee; } </style> <body> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <!-- 单引号只是对下面对两个class1作出区分 不使用也可以 前面是class 样式 后面是bool值 --> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> </div> <script> new vue({ el: '#app', data: { class1: false } }); </script> </body>
v-on
:用来监听dom
事件 其修饰符可以指定键盘事件v-on:click
简写@click
:事件监听v-model
:双向绑定 一般结合input
textarea
(多行) 使用 其有修饰符.lazy
.number
.trim
生命周期
以下都是钩子函数
beforecreate
(创建前)created
(创建后)beforemount
(载入前)mounted
(载入后)beforeupdate
(更新前)updated
(更新后)beforedestroy
(销毁前)destroyed
(销毁后)
(在不同的时间点,可以进行不同的操作。)
计算属性
computed
:计算属性
区别与methods
:
性能相比methods
要高 因为有缓存 只有在相关值发生改变时才会触发 在第一次渲染页面也会主动触发
计算属性的数据源未发生变化 则不会触发响应的计算属性
属性区分于方法
<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedmessage }}</p> </div> <script> var vm = new vue({ el: '#app', data: { message: 'runoob!' }, computed: { // 以下的函数将提供给计算属性的 getter 计算属性默认只有getter reversedmessage: function() { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>
计算属性中默认存在getter方法 我们可以手动添加setter方法:
<div id="app"> <p>{{ site }}</p> </div> <script> var vm = new vue({ el: '#app', data: { name: 'google', url: 'http://www.google.com' }, computed: { site: { // getter get: function() { return this.name + ' ' + this.url }, // setter set: function(newvalue) { var names = newvalue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter, vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; //触发set方法 document.write('name: ' + vm.name); //动态更新dom树 document.write('<br>'); document.write('url: ' + vm.url); </script>
过滤器
vue中可以自定义过滤器 被用作常见地文本格式化
<div id="app"> <!-- 过滤器的用法 --> {{ message | capitalize }} </div> <script> new vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function(value) { if (!value) return '' value = value.tostring() return value.charat(0).touppercase() + value.slice(1) //对字符串的第一个字母进行大写 } } }) </script>
监听属性
watch
:响应数据变化
<div id="computed_props"> <!-- 分别绑定kilometers和meters --> 千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters"> </div> <p id="info"></p> <script type="text/javascript"> var vm = new vue({ el: '#computed_props', data: { kilometers: 0, meters: 0 }, methods: {}, computed: {}, watch: { kilometers: function(val) { //dom中的相关绑定会触发对应的观察属性 this.kilometers = val; this.meters = val * 1000; }, meters: function(val) { this.kilometers = val / 1000; this.meters = val; } } }); // $watch 是一个实例方法 $作用与vue自带的属性区别u与自定义的属性 vm.$watch('kilometers', function(newvalue, oldvalue) { // 这个回调将在 vm.kilometers 改变后调用 document.getelementbyid("info").innerhtml = "修改前值为: " + oldvalue + ",修改后值为: " + newvalue; }) </script>
样式绑定
- 单样式绑定:
<style> .active { width: 100px; height: 100px; background: green; } </style> <body> <div id="app"> <!-- 主要是v-bind的使用 --> <div v-bind:class="{ active: isactive }"></div> </div> <script> new vue({ el: '#app', data: { isactive: true } }) </script>
- 多样式绑定:
<style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> <body> <div id="app"> <div class="static" v-bind:class="{ active: isactive, 'text-danger': haserror }"> </div> </div> <script> new vue({ el: '#app', data: { isactive: true, haserror: false } }) </script>
组件
组件是整个vue知识体系中最重要的一个模块
组件的作用是:复用
前端路由相对于传统路由 请求少 节省资源
mode:history //不使用html5 实现前进和后退 默认设置
关于组件的引用 除了直接引用自定义标签 is标签也可以引用组件到指定的位置,动态绑定组件
全局组件
<div id="app"> <runoob></runoob> </div> <script> // 注册 此中注册方式为全局组件 所有的外部组件中都可以引用 vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new vue({ el: '#app' }) </script>
局部组件
区分于全局组件
<div id="app"> <runoob></runoob> </div> <script> var child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': child } }) </script>
template
template
模版 用来承载dom
树 常在组件中使用
props
自定义组件属性:通过props申明属性 可以通过v-bind动态绑定自定义属性
<div id="app"> <child message="hello!"></child> </div> <script> // 注册 vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' //可以这样理解:此处message既是属性也是变量 }) // 创建根实例 new vue({ el: '#app' }) </script>
动态props
通过v-bind
实现
<div id="app"> <div> <input v-model="parentmsg"> <br> <!-- 通过v-bind绑定父组件中的parentmsg 实现动态绑定--> <child v-bind:message="parentmsg"></child> </div> </div> <script> // 注册 vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new vue({ el: '#app', data: { parentmsg: '父组件内容' } }) </script>
组件间交互
父组件往子组件传入数据使用props
反过来则用emit
父传子:
子组件props
定义属性 子组件标签引用v-bind
将父组件参数与子组件属性绑定
<div id="counter-event-example"> <button-todo v-bind:todo="item"></button-todo> </div> <script> vue.component('button-todo', { props: ['todo'], template: '<button >{{ todo }}</button>' }) new vue({ el: '#counter-event-example', data: { item: '我是item' } }) </script>
子传父:
父组件定义method:fv_fuc 接受参数arg
子组件 this.$.emit(<fuc>,<arg>)
子组件标签引用 v-on:<fuc>="fv_fuc"
流程: 子组件的emit触发标签引用的fuc继而触发父组件的fv_fuc
<div id="app"> <div id="counter-event-example"> <p>{{ counter }}</p> <button-counter v-on:increment="setcounter"></button-counter> </div> </div> <script> vue.component('button-counter', { template: '<button v-on:click="incrementhandler">{{ counter }}</button>', data: function() { return { counter: 0 } }, methods: { incrementhandler: function() { this.counter += 1 this.$emit('increment', this.counter) } }, }) new vue({ el: '#counter-event-example', data: { counter: 0 }, methods: { setcounter: function(somedata) { this.counter = somedata //接收子组件的数据 } } }) </script>
自定义指令
directive
定义指令名称inserted
当绑定元素插入到dom中会触发
<div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus vue.directive('focus', { // 当绑定元素插入到 dom 中。 inserted: function(el) { // 聚焦元素 el.focus() } }) // 创建根实例 new vue({ el: '#app' }) </script>
vue.directive
定义全局指令 directives: {}
的方式定义局部指令 这点和component(组件)
相似
<div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 创建根实例 new vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus 和components的使用相似 focus: { // 指令的定义 inserted: function(el) { // 聚焦元素 el.focus() } } } }) </script>
directive
可以和钩子函数配合使用 不需要钩子函数也可以简写 第二个参数是function
,默认的第一个参数是el
<script> vue.directive('runoob', { // 绑定bind的钩子函数 bind: function(el, binding, vnode) { var s = json.stringify el.innerhtml = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + object.keys(vnode).join(', ') } }) new vue({ el: '#app', data: { message: '菜鸟教程!' } }) </script>
路由
路由:
需要下载 vue_router
库 然后vue.use(vrouter)
使用步骤:
1.定义路由组件
2.定义路由:映射组件
3.通过routes配置新建router实例
4.通过router参数注入路由 并且挂载根实例
页面跳转 rooter-link
<!-- 导入路由用到的js --> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script> <div id="app"> <h1>hello app!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">go to foo</router-link> <router-link to="/bar">go to bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script> // 0. 如果使用模块化机制编程,導入vue和vuerouter,要调用 vue.use(vuerouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const foo = { template: '<div>foo</div>' } const bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [{ path: '/foo', component: foo }, { path: '/bar', component: bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new vuerouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new vue({ router }).$mount('#app') // 现在,应用已经启动了! </script>
路由参数
在映射表里设置 如:path:'/apple/:color'