vue对比jquery
vue:mvvm 数据驱动影响视图 适用于复杂数据
jquery:mvc 视图塞入数据 适用于复杂视图动效
生命周期
以下都是钩子函数
beforeCreate(创建前)
created(创建后)
beforeMount (载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
计算属性
computed:计算属性
区别与methods:
性能相比methods要高 因为有缓存 只有在相关值发生改变时才会触发 在第一次渲染页面也会主动触发
计算属性的数据源未发生变化 则不会触发响应的计算属性
属性区分于方法
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
计算属性中默认存在getter方法 我们可以手动添加setter方法:
{{ site }}
相关指令
v-text 等同大胡子效果 但是会转换为字符串
v-html 绑定html属性
例如:
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和内联样式 例如:
过滤器
vue中可以自定义过滤器 被用作常见地文本格式化
{{ message | capitalize }}
监听属性
watch:响应数据变化
多样式绑定:
组件
组件是整个vue知识体系中最重要的一个模块
组件的作用是:复用
前端路由相对于传统路由 请求少 节省资源
mode:history //不使用html5 实现前进和后退 默认设置
关于组件的引用 除了直接引用自定义标签 is标签也可以引用组件到指定的位置,动态绑定组件
全局组件
局部组件
区分于全局组件
template
template 模版 用来承载dom树 常在组件中使用
props
自定义组件属性:通过props申明属性 可以通过v-bind动态绑定自定义属性
动态props
通过v-bind实现
组件间交互
父组件往子组件传入数据使用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(,)
子组件标签引用 v-on:=“fv_fuc”
流程: 子组件的emit触发标签引用的fuc继而触发父组件的fv_fuc
{{ counter }}
<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中会触发
页面载入时,input 元素自动获取焦点:
vue.directive定义全局指令 directives: {}的方式定义局部指令 这点和component(组件)相似
页面载入时,input 元素自动获取焦点:
directive可以和钩子函数配合使用 不需要钩子函数也可以简写 第二个参数是function,默认的第一个参数是el
Vue.directive(‘runoob’, {
// 绑定bind的钩子函数
bind: function(el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ’ + s(binding.name) + ‘
’ +
'value: ’ + s(binding.value) + ‘
’ +
'expression: ’ + s(binding.expression) + ‘
’ +
'argument: ’ + s(binding.arg) + ‘
’ +
'modifiers: ’ + s(binding.modifiers) + ‘
’ +
‘vnode keys: ’ + Object.keys(vnode).join(’, ')
}
})
new Vue({
el: ‘#app’,
data: {
message: ‘菜鸟教程!’
}
})
路由
路由:
需要下载 vue_router库 然后vue.use(VRouter)
使用步骤:
1.定义路由组件
2.定义路由:映射组件
3.通过routes配置新建router实例
4.通过router参数注入路由 并且挂载根实例
页面跳转 rooter-link
Hello App!
Go to Foo Go to Bar
路由参数
在映射表里设置 如:path:’/apple/:color’
ex6 语法
import 配合export default使用以page的形式导出组件 这都是ex6的语法
另外一种写法: 区别与上一种写法 需要 {} 的使用
let com={ //let 在当前作用域下声明一个变量,不会泄漏到外部 区别与var const:常量
}
export { com } //注意{}的使用
引用的时候:
import { com } from …
脚手架
vue-cli 官方脚手架工具
优势
成熟的vue项目架构设计
本地测试服务器 热加载服务器 热更新
集成打包上线方案 webpack
系统要求:
node>4.0
指令
vue list:查看模版方案
vue init webpack demo 利用脚手架 初始化项目
项目结构
利用vue_lic生成的项目结构:
build: 项目构建(webpack)相关代码
config:配置目录 包括端口号等 初学可以使用默认的
node_modules :npm 加载的项目依赖模块
src:源码 包含几个目录及文件:
assets :放置一些图片 logo
components :放置一个组件文件 可以不使用
App.vue : 项目入口文件 可以直接把组件写在这里 取代 components目录
main.js :项目的核心文件
.****文件 配置文件 包括语法配置 git配置
static:静态文件 资源目录 如图片 字体等
package.json :npm需要的一套配置文件
index.html: 首页文件入口 可以添加一些meta信息或者统计代码
npm run build:此指令用于生成部署用的文件 文件会存在dist中
创建项目
步骤:
vue init webpack Vue-Project
根据提示配置项目信息
cd 到项目下 执行npm install:安装相关依赖 此处需要翻墙
npm run dev :运行项目
有时候浏览器打不开页面可能是端口被占用
更换端口:
更换端口.png
mac下查询端口占用情况 例如查看8081端口:
lsof -i tcp:8081
细节杂记
字符串反转:
message.split(’’).reverse().join(’’)
“-” 命名的属性引用时必须使用单引号
vue中可以绑定对象 也可以绑定对象的计算属性
例子:
内联样式的两种写法:
在html中直接{}
在css中定义class 然后html中引用
关于导出组件的data中采用函数return data的方式 形成自己的实例 防止复用冲突
vue2.0 如果需要js的完全编程能力 必须使用render渲染外部引入的app组件 区别与template更接近与编译器
template 写 html,script写 js,style写样式,一个template只能有一个div
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来,例如: