1、使用脚手架Vue-cli构建vue项目
初始化项目：vue create project 或 vue ui
进入项目根目录：cd project
在服务器中打开：npm run serve 或 yarn serve
打包项目：npm run build 或 yarn build
测试项目：npm run lint 或 yarn lint
安装插件或依赖：vue add element 或 yarn add element-ui 或 npm install element-ui --save2、申明式渲染
<div id="app">
{{msg}}
</div>
var app=new Vue({
el:'#app',
data:{
msg:'Hello World!'
}
})
result： hello world3、Vue实例
var data={a:1}
var vm=new Vue({
el:'example',
data:data
})
vm.$data===data //=>true
vm.$el===document.getElementById('example') //=>true
vm.$watch('a',function(newValue,oldValue){
//=>当 “ $vm.a ”改变后调用
})4、Vue的生命周期构子
- new Vue()实例化一个vue对象
- 初始化事件和生命周期
- beforeCreate构子：组件创建之前，数据data和事件监测已初始化
- 通过依赖注入导入依赖项
- created构子：组件实例以创建完成，此时Dom还未生成
- 检查是否配置挂载节点 el 项，如果没有则等待使用vm.$mount(el)绑定
- 是否存在：template 选项，存在则将其编译到渲染函数，不存在则以el的outHTML为编译模板
- beforeMount构子：模板编译、挂载之前调用
- 编译，并替换了被绑定元素
- mounted构子：组件编译、挂载节点
- beforeupdate构子：当data数据发生改变时触发，此时即将更新渲染
- updated构子：重新渲染成功
- beforeDestroy:组件即将销毁
- destroyed：组件已经销毁
5、Vue常用语法、指令
数据绑定语法：<span>{{msg}}</span>
一次性数据绑定：<span v-once>{{msg}}</span> //但数据改变时msg不更新
数据绑定只能解释普通文本，解释html可用v-html：<span v-html="tem"></span>
v-if指令：用于条件判断移除显示元素，v-if是真正的条件渲染，v-show是切换display
<span v-if="ok">yes</span>
<span v-else>No</span>
<template v-if="true">
<h1>可以使用template包裹住元素来判断，不会显示多余的template标签</h1>
</template>
v-bind指令：用于绑定HTML特性如 Class、src、href、style
<a :href="url"></a>
<div class="a" :class="{active:isActive,'text-danger':hasErr}"></div>
data:{
isActive:true,
hasErr:false
}
result: <div class="a active"></div>
v-on指令：用于监听Dom事件 <a @click=""></a>
v-for指令用于循环：
<div id="app">
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
var app=new Vue({
el:'#app',
data:{
items:[
{text:'Javascript'},
{text:'Vue'}
]
}
})6、计算属性与侦听器
计算属性用于简单计算，由于在数据绑定中写表达式难以维护，也无法进行条件判断等动作,可以使用计算属性来实现，计算属性会根据其依赖的值自动更新并缓存
<span>{{reversedMsg}}</span>
new Vue({
el:'app',
data:{
Msg:'Hello'
},
computed:{
reversedMsg:function(){
return this.Msg.split('').reverse.join('')
}
},
watch:{
Msg:function(newMsg,oldMsg){
newMsg=oldMsg+1
}
}
})
result: gsMdesrevrr
侦听器watch侦听数据变化（Msg）：当需要在数据变化时执行异步或开销较大的操作时使用7、列表渲染(v-for的优先级比v-if高)
<ul>
<template v-for="(item,index) in items" :key="item.index" v-if(item.age>20)>
<li> {{aaa}}-{{index}}-{{item.messge}}</li>
<li class="more">底部加载数据</li>
</template>
</ul>
data:{
aaa:333,
items:[
{messge:111,age:444},
{messge:222}
]
}
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升8、使用Vue.set()响应式控制数据
var vm =new Vue({
data:{
user:{
name:'Cai'
}
}
})
添加一个新的 age 属性到嵌套的 userProfile 对象
vm.set(vm.user,'age',22)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})9、事件处理
<button @click="wran('传入消息',$event)"></button>
methods：{
warn:function(message,event){
if(event){
// 现在我们可以访问原生事件对象
}
}
}
<a @click.stop='doThis'></a> //阻止单击事件继续传播
<form @submit.prevent=''></form> //提交事件不再重载页面
<div @click.capture=''></div> // 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div @click.self="">...</div> //只当在 event.target 是当前元素自身时触发处理函数
<div @click.once=""></div> //只触发一次点击
<div v-on:scroll.passive="onScroll">...</div> //滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，可提升性能
键盘事件：
<input @keyup.enter="submit" /> //按 enter键触发
<input @keyup.page-down="onPageDown"> //处理函数仅在 $event.key === 'PageDown' 时被调用10、Vue表单处理
v-model双向数据绑定
<input v-model="message"> //输入框
<p style="white-space: pre-line;">{{message}}</p>
<textarea v-model="message"></textarea> //多行输入框
==>复选框
<div id="example">
<input type="checkbox" id="red" value="red" v-model="selectColor" >
<label for="red">红色</babel>
<input type="checkbox" id="green" value="green" v-model="selectColor" >
<label for="green">绿色</babel>
<input type="checkbox" id="blue" value="blue" v-model="selectColor" >
<label for="blue">蓝色</babel>
<span>{{selectColor}}</span>
</div>
new Vue({
el:'example',
data:{
selectColor:[] //选中项会添加至数组selectColor中
}
})
==>单选按钮
<input type="radio" v-model="select" value="男">
<input type="radio" v-model="select" value="女">
<span>{{select}}</span>
data:{
select:''
}
==>下拉选择框
<select v-model="such"> //加 multiple 多选，得到数组
<template v-for="option in options">
<option disabled>请选择</option>
<option :value='option.value'>{{option.text}}</option>
</template>
</select>
<span>{{such}}</span>
data:{
such:'A',
options:[
{text:'one',value:'A'},
{text:'two',value:'B'}
]
}
<input type="checkbox" v-model="toggle"> //当选中时vm.toggle===true
<input type="radio" v-model="pick" :value="a"> //选中时vm.pick===vm.a
<input v-model.lazy="msg" > //在change时更新而非input
<input v-model.number="age" type="number"> //将用户的输入值转为数值类型
<input v-model.trim="msg"> //自动过滤用户输入的首尾空白字
11、Vue组件基础
定义一个组件 （组件与 new Vue 接收相同的选项，除el外）
Vue.component('my-component',{ data:function(){ //一个组件的 data 选项必须是一个函数 return{ count:0 } }, template:'<button @click='count++'>{{count}}</button>' }) 使用组件：<my-component></my-component>父组件通过Prop向子组件传递数据
Vue.component('child',{ props:['title'], template:'<h3>{{title}}</h3>' }) 在父组件中使用：<child title='我是标题'></child>给子组件传递的数据来自父组件的data
Vue.component('child',{ props:['title'], template:'<h3>{{title}}</h3>' }) new Vue({ el:'#app', data:{ posts:[ {id:1,title:'title1'}, {id:2,title:'title2'} ] } }) <child v-for='post in posts' :key='post.id' :title='post.title'></child> //循环动态渲染两个child组件当需要传递的props太多时，可以在父组件传递一个数组或对象,然后在子组件接收
Vue.component(‘child’,{props:['post'], template:` <div> <h2>{{post.title}}</h2> <div>{{post.content}}</div> </div> ` }) <child v-for='post in posts' :key='post.id' :post='post'></child>子组件通过事件向父组件发送消息
Vue.component('child',{ template:`<button @click='$emit('setFont',0.1)'></button>` }) new Vue({ el:'#app', data:{ postFontSize:1 }, template:` <div style='{fontSize:postFontSize+'em'}'> <p>点击按钮放大文字</p> <child @setFont='postFontSize+=$event'></child> </div> ` })如果自定义组件需要使用 v-model 实现双向数据绑定
Vue.component('my-input',{ props:['value'], template:` <input :value='value' :input='$emit('input',$event.target.value)'> ` }) <my-input v-model='searchText'></my-input><slot>插槽
<alert-box> //如果想在这里面写东西,在组件内用插槽 </alert-box> Vue.component('alert-box',{ template:` <div class='demo'> <slot></slot> </div> ` })动态组件与 is 特性
<ul>、<ol>、<table> 和 <select>等元素对内部元素有严格的要求如：li/tr/option,如果想在这些元素中嵌入使用自定义组件，可以使用 is 特性： <ul> <li is='my-component'></li> </ul> 使用 is 实现动态组件 <component :is='creunt'></component>
