您的位置：首页 > Web前端 > Vue.js

Vue 学习笔记

2019-10-09 15:54 120 查看

vue对比jquery

vue

：

mvvm

数据驱动影响视图适用于复杂数据

jquery

：

mvc

视图塞入数据适用于复杂视图动效

（其实都是js 的封装，以及对html 的扩展）

生命周期

以下都是钩子函数

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'

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航