不是面向DOM进行编程，而是面向数据去编程。当数据发生改变，页面就会随着改变。
属性绑定(v-bind)和双向数据绑定(v-model)
模板指令(v-bind:)后面跟的内容不再是字符串而是: js表达式 title指向的是data中的title变量
<div id="root">
<div :title="title">Hello world</div>
<input type="text" v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el:‘#root‘,
data:{
content:"this is a text",
title:‘tAhis is a hello world‘
}
})
</script>
计算属性及侦听器
<div id="root">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
<div>{{fullName}}</div>
<div>{{counts}}</div>
</div>
<script>
new Vue({
el:‘#root‘,
data:{
firstName:‘‘,
lastName:‘‘,
counts:0
},
computed:{
fullName:function () {
return this.firstName + ‘ ‘ + this.lastName
}
},
watch:{
fullName:function () {
this.counts ++
}
}
})
</script>
v-for\v-if\v-show
<div id="root">
<div v-show="show">coming~</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:‘#root‘,
data:{
show:true,
list:[1,2,3,4,5]
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
【vm.$el 、vm.$data】—— $开头指的是vue的实例属性或方法
动态改变字体颜色：
<div @click="ClickChange" :class="{actived:isActived}">change color</div>
<div :style="FontColor" @click="ChangeFontColor">change 2 color</div>
<div :style="[FontColor,{fontSize:‘26px‘}]" @click="ChangeFontColor">change 2 color</div>
data:{
isActived:false,
FontColor:{
color:‘red‘
}
},
methods:{
ClickChange:function () {
this.isActived = !this.isActived;
},
ChangeFontColor:function () {
this.FontColor.color= this.FontColor.color === ‘red‘ ? ‘black‘ : ‘red‘
}
},
//子组件中定义data，data必须是个函数 使用is解决H5上面的小bug 、ref的使用 （4-1）
<div ref="hello" @click="onClick">hello world</div> methods: { onClick:function(){ console.log(this.$refs.hello); //<div>hello world</div> console.log(this.$refs.hello.innerHTML); //hello world } }
ref的使用元素求和：
<div id="root">
<counter ref="change1" @change="handleChange"></counter>
<counter ref="change2" @change="handleChange"></counter>
<div>总计：{{total}}</div>
</div>
<script>
Vue.component(‘counter‘,{
data:function(){
return{
number:0
}
},
template:"<div @click=‘handleClick‘>{{number}}</div>",
methods:{
handleClick:function () {
this.number++;
this.$emit(‘change‘)
}
}
})
var app = new Vue({
el:"#root",
data:{
total:0
},
methods:{
handleChange:function () {
this.total = this.$refs.change1.number + this.$refs.change2.number
}
}
})
</script>
父子组件传值
单向数据流：子组件不能修改父组件传过来的数据，如果要修改，拷贝一个副本修改副本。
<div id="root">
<son :count="2" @change="hanldeChange"></son>
<son :count="3" @change="hanldeChange"></son>
<div>总计:{{total}}</div>
</div>
<script>
var son = {
props:[‘count‘],
data:function(){ //子组件避免修改父组件传过来的值
return{
number:this.count //克隆一份修改这个克隆的副本
}
},
template:"<div @click=‘handleClick‘>{{number}}</div>",
methods:{
handleClick:function () {
this.number= this.number + 2; //克隆一份修改这个克隆的副本
this.$emit(‘change‘,2)
}
}
}
var app = new Vue({
el:"#root",
data:{
total:5
},
components:{
son:son,
},
methods:{
hanldeChange:function (step) {
this.total += step
}
}
})
</script>
单页应用：页面跳转--》js渲染
npm install stylus --save
npm install stylus-loader --save
npm install vue-awesome-swiper@2.6.7 --save
Swiper插件报错 Maximum call stack size exceeded 居然是因为一个名字 Swiper改为HomeSwiper恢复正常。
name
递归组件、某页面取消缓存、控制台显示的名字
多个组件的过渡
<style type="text/css"> .fade-enter,.fade-leave-to{ opacity: 0 } .fade-enter-active,.fade-leave-active{ transition: opacity 1s } </style> <div id="root"> <transition name="fade" mode=‘out-in‘> <component :is="type"></component> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> Vue.component(‘child‘,{ template:‘<div>child</div>‘ }) Vue.component(‘child-one‘,{ template: ‘<div>child-one</div>‘ }) var vm= new Vue({ el: ‘#root‘, data:{ type: ‘child‘ }, methods:{ handleClick:function(){ this.type = this.type === ‘child‘ ? ‘child-one‘ : ‘child‘ } } }) </script>
Vue动画封装
<div id="root">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<h1>hello world</h1>
</fade>
<button v-on:click="show = !show">切换</button>
</div>
<script type="text/javascript">
Vue.component(‘fade‘,{
props: [‘show‘],
template:‘<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>‘,
methods:{
handleBeforeEnter:function(el){
el.style.color="red"
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color="green"
done()
},2000)
}
}
})
var vm= new Vue({
el: ‘#root‘,
data:{
show: true
}
})
</script>
在脚手架工具里：data不再是一个对象而是一个函数，它的返回值是具体的数据。
原文：https://www.cnblogs.com/lsdk/p/8907931.html