vue.js
vue
安装
- 安装npm
- npm install vue
- npm install —global vue
创建项目
- vue init webpack first-project
目录：
Build 发布代码位置
Config 配置目录，端口号等
Node_modules npm加载项目 的依赖模块
Src 开发目录
Static 静态文件目录
Test 测试目录
index.html 入口文件
package.json 项目配置文件
readme.md markdown文档
- npm install 安装依赖
- Npm run dev
基本语法
插值
- 文本
- {{message}} new Vue（el：’#app’， data：{message: ‘helloworld’}）
- Html
v-html new Vue（el：’#app’， data：{message: ‘<h1>helloworld</h1>’}）
- 属性
v-model = ‘class1’ v-bind：class=“{‘class1’:class1}”
new Vue（el：’#app’， data：false）
- 参数
v-bind: href=“url”
new Vue（el：’#app’， durl:’www.baidu.com’）
- 表达式
{{5+6}} {{ok?yes:no}} {{message.split(‘ ’).reverse().join(‘’)}} 完全匹配js表达式
- 指令
v-if <p v-if = “seen”>看得到吗</p>. new vue（{el:’#app’, data:{ seen:true}}）
- 监听事件
<a v-on:onclick.prevent=“onclick”>
<a v-on:onclick=“reverseMessage”>
- 输入
{{message}}. New vue({ el:’#app’, message:’输入内容’})
- 过滤
{{message | capitalize}} new vue({el:’app’,data:{message:’runoob’, filters:function(value){ if(!value) return ‘ ’; value == value.tostring(); return value.charat(0).touppercase() + value.slice(1)}}})
缩写 v-bind: -> : v-on: ->@
条件语句。v-if v-else-if v-else. V-show 显示语句
循环语句 v-for=“site in sites” 循环渲染输出 sites列表，数组，整数，或者迭代sites 对象属性
V-for = “(value, key) in sites”取出键值和键名
vue实例
- New vue({}) 启动vue实例
- 属性方法
vue实例会代理 data对象里的属性
Var data = {a:1}
Var vm = new vue({ el:’#app’, data : data })
那么vm.a === data.a
Vm.a = 2 影响到原始数据使得 data.a===2
vm.$data === data
vm.$el === document.getElementByid(‘app’)
vm.$watch(‘a’, function(newVal, oldVal)){ //回调函数。在 vm.a 值改变后调用
- 计算
var vm = new vue({
el : ‘#app’,
Data : {message:’’runoob”},
Computed:{
ReversedMessage:function(){
Return this.message.split(‘’).reverse().join(‘ ’)
}
}
})
computed 会声明vm.reversedMessage 建立依赖关系 默认调用getter属性
methods同样可以代替computed 但是每次渲染输出都会重新计算
Computed 不仅可以getter获取属性值，可以设置setter属性声明新的属性
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]
}
}
}})
vue样式绑定
- class属性
v-bind：class=“active: isActive”
V-bind: class=“[active, dengers]”
New vue({el : ‘#app’, data:{isActive:true}})
- 内联样式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内连样式</div>
vue事件处理
- v-on监听事件
<button v-on:click="counter += 1">增加 1</button>
<button v-on:click=“greet">Greet</button>
vue的methods定义greet方法
<button v-on:click="say('what')">Say what</button> vue 的methods定义 say方法
- 事件修饰符
.stop .prevent .capture .self .once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按键监听
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13=“submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter=“submit">
按键别名
.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc
.space .up .down .left .right .ctrl .alt .shift .meta
- 表单
如上图模型 v-model指令创建双向数据绑定表单元素
<input v-model="message" placeholder=“编辑我……">
<textarea v-model="message2" placeholder=“多行文本输"></textarea>
单选
<input type="checkbox" id="checkbox" v-model=“checked">
多选
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<input type="checkbox" id="google" value="Google" v-model=“checkedNames">
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
select
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
.lazy .number .trim 修饰符
- vue组件
注册组件 vue.component(tagName, options)
注册事件
注册指令vue.directive(‘focus’, function{})
Hook函数 bind第一次绑定时调用一次
Inserted 被绑定元素插入父节点时调用
Update 更新时调用
componentupdate 被绑定元素 在模版完成一次更新周期调用
unbind 元素解绑定时候调用一次
hook函数参数：el 绑定元素
Binding 指令对象-》name指令名 value绑定值 oldvalue 绑定前值
expression 绑定值的字符串形式 arg指令参数 modifiers修饰对象
Vnode 虚拟节点
Oldvnode 上一个虚拟节点
- vue路由
