1. 初体验
初体验
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
</ head>
< body>
< div id = " app" >
< h1> {{message}}</ h1>
< h2> {{name}}</ h2>
</ div>
< div> {{message}}</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '试一试!' ,
name: 'zh'
}
} )
</ script>
遍历.
< div id = " app" >
< ul>
< li v-for = " item in movies" > {{item}}</ li>
</ ul>
</ div>
< script>
const app = new Vue ( {
el: "#app" ,
data: {
message: '你好啊' ,
movies: [ '火影忍者' , '海贼王' , '名侦探柯南' ]
}
} )
</ script>
计数器
< div id = " app" >
< h2> 当前计数:{{counter}}</ h2>
< button v-on: click= " add" > +</ button>
< button v-on: click= " sub" > -</ button>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
counter: 0 ,
} ,
methods: {
add : function ( ) {
this . counter++
} ,
sub : function ( ) {
this . counter--
}
}
} )
</ script>
2. 插值操作
Mustache语法
< div id = " app" >
< h2> {{message}}</ h2>
< h2> {{message}},Vue!</ h2>
< h2> {{firstName + lastName}}</ h2>
< h2> {{firstName +' '+lastName}}</ h2>
< h2> {{firstName}} {{lastName}}</ h2>
< h2> {{counter * 2}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
firstName: 'kobe' ,
lastName: 'bryant' ,
counter: 100
}
} )
</ script>
v-once指令
< div id = " app" >
< h2> {{message}}</ h2>
< h2 v-once > {{message}}</ h2>
</ div>
v-html指令
< div id = " app" >
< h2> {{url}}</ h2>
< h2 v-html = " url" > </ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
url: '<a href="http://www.baidu.com">百度一下</a>' ,
}
} )
</ script>
v-text指令
< div id = " app" >
< h2> {{message}},vue</ h2>
< h2 v-text = " message" > vue</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊'
}
} )
</ script>
v-pre指令
< div id = " app" >
< h2 v-pre > {{message}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊'
}
} )
</ script>
v-cloak指令
< div id = " app" v-cloak >
< h2> {{message}}</ h2>
</ div>
< script>
setTimeout ( function ( ) {
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊'
}
} )
} , 1000 )
</ script>
3. 动态绑定属性
v-bind 的基本使用
< div id = " app" >
< img v-bind: src= " imgURL" alt = " " >
< a v-bind: href= " aHref" > 百度一下</ a>
< img :src = " imgURL" alt = " " >
< a :href = " aHref" > 百度一下</ a>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595268220238&di=099c7272e13493fc60c84d1cd094b466&imgtype=0&src=http%3A%2F%2Fzbjquan.zbjimg.com%2Fforum%2F7niu%2F201809%2F28%2F175317az6j6wxrjsej171j.jpg' ,
aHref: 'http://www.baidu.com'
}
} )
</ script>
v-bind动态绑定class(对象语法).html
< style>
.active {
color : red;
}
</ style>
< div id = " app" >
< h2 class = " title" v-bind: class= " {active:isActive,line:isLine}" > {{message}}</ h2>
< h2 class = " title" v-bind: class= " getClasses()" > {{message}}</ h2>
< button v-on: click= " btnClick" > 按钮</ button>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
active: 'active' ,
isActive: true ,
isLine: true
} ,
methods: {
btnClick : function ( ) {
this . isActive = ! this . isActive
} ,
getClasses : function ( ) {
return { active: this . isActive, line: this . isLine}
}
}
} )
</ script>
v-bind动态绑定class(数组语法).html
< div id = " app" >
< h2 class = " title" :class = " [active,' line' ]" > {{message}}</ h2>
< h2 class = " title" :class = " getClasses()" > {{message}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
active: 'aaa'
} ,
methods: {
getClasses : function ( ) {
return [ this . active, 'line' ]
}
}
} )
</ script>
v-bind动态绑定style(对象语法)
< div id = " app" >
< h2 :style = " {' font-size' :finalSize+' px' ,color:finalColor}" > {{message}}</ h2>
< h2 :style = " getStyles()" > {{message}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
finalSize: 100 ,
finalColor: 'red'
} ,
methods: {
getStyles : function ( ) {
return { 'font-size' : this . finalSize+ 'px' , color: this . finalColor}
}
}
} )
</ script>
v-bind动态绑定style(数组语法)
< div id = " app" >
< h2 :style = " [baseStyle,baseStyle1]" > {{message}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
baseStyle: { backgroundColor: 'red' } ,
baseStyle1: { fontSize: '100px' }
}
} )
</ script>
4. 计算属性
计算属性的基本使用
< div id = " app" >
< h2> {{firstName + ' ' + lastName}}</ h2>
< h2> {{firstName}} {{lastName}}</ h2>
< h2> {{getFullName()}}</ h2>
< h2> {{fullName}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
firstName: '小' ,
lastName: '李'
} ,
computed: {
fullName : function ( ) {
return this . firstName+ ' ' + this . lastName
}
} ,
methods: {
getFullName ( ) {
return this . firstName+ ' ' + this . lastName
}
}
} )
</ script>
计算属性的复杂操作
< div id = " app" >
< h2> 总价格:{{totalPrice}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
books: [
{ id: 10 , name: 'html' , price: 100 } ,
{ id: 11 , name: 'css' , price: 200 } ,
{ id: 13 , name: 'js' , price: 300 }
]
} ,
computed: {
totalPrice : function ( ) {
let result = 0 ;
for ( let i = 0 ; i < this . books. length; i++ ) {
result += this . books[ i] . price
}
return result
}
}
} )
</ script>
计算属性的setter和getter
计算属性内部有set和get方法 一般我们只用get方法,不用set方法
< div id = " app" >
< h2> {{fullName}}</ h2>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
firstName: '小' ,
lastName: '李'
} ,
computed: {
fullName: {
get : function ( ) {
return this . firstName + ' ' + this . lastName
}
}
}
} )
</ script>
计算属性和方法的区别
计算属性有缓存机制,方法没有; 只要计算属性内相关依赖的值不发生改变,多次调用计算属性可以从缓存中获取值,不必重复计算; 方法每次调用都要重新执行一遍;
< div id = " app" >
< h2> {{firstName}} {{lastName}}</ h2>
< h2> {{getFullName()}}</ h2>
< h2> {{fullName}}</ h2>
</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
firstName: '小' ,
lastName: '李'
} ,
methods: {
getFullName : function ( ) {
return this . firstName + ' ' + this . lastName
}
} ,
computed: {
fullName : function ( ) {
return this . firstName + ' ' + this . lastName
}
}
} )
</ script>
5. 事件监听
v-on的使用。简写用@
< div id = " app" >
< h2> {{counter}}</ h2>
< button @click = " increment" > +</ button>
< button @click = " decrement" > -</ button>
</ div>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
counter: 0
} ,
methods: {
increment ( ) {
this . counter++
} ,
decrement ( ) {
this . counter--
}
}
} )
</ script>
v-on的参数问题
< div id = " app" >
< button @click = " btn1Click()" > 按钮一</ button>
< button @click = " btn1Click" > 按钮一</ button>
< button @click = " btn2Click(123)" > 按钮二</ button>
< button @click = " btn2Click()" > 按钮二</ button>
< button @click = " btn3Click(123,$event)" > 按钮三</ button>
< button> 按钮四</ button>
</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊'
} ,
methods: {
btn1Click ( ) {
console. log ( 'btn1Click' )
} ,
btn2Click ( abc ) {
console. log ( '--------' + abc)
} ,
btn3Click ( abc, event ) {
console. log ( '++++' , abc, event)
}
}
} )
</ script>
v-on的修饰符
< div id = " app" >
< div @click = " divClick" >
< button @click.stop = " btnClick" > 按钮</ button>
</ div>
< br>
< form action = " www.baidu.com" >
< input type = " submit" value = " 提交" @click.prevent = " submitClick" >
</ form>
< br>
< input type = " text" @keyup.enter = " keyUp" >
< br>
< button @click.once = " onceClick" > 点击</ button>
</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊'
} ,
methods: {
divClick ( ) {
console. log ( "divClick" )
} ,
btnClick ( ) {
console. log ( "btnClick" )
} ,
submitClick ( ) {
console. log ( "submitClick" )
} ,
keyUp ( ) {
console. log ( "keyUp" )
} ,
onceClick ( ) {
console. log ( "onceClick" )
}
}
} )
</ script>
6. 条件判断
v-if和v-else-if和v-else的使用
< div id = " app" >
< h2 v-if = " score>-90" > 优秀</ h2>
< h2 v-else-if = " score>=80" > 良好</ h2>
< h2 v-else-if = " score>=60" > 及格</ h2>
< h2 v-else > 不及格</ h2>
</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
score: 99
}
} )
</ script>
v-show的使用
< div id = " app" >
< h2 v-if = " isShow" id = " aaa" > {{message}}</ h2>
< h2 v-show = " isShow" id = " bbb" > {{message}}</ h2>
</ div>
< script src = " ../js/vue.min.js" > </ script>
< script>
const app = new Vue ( {
el: '#app' ,
data: {
message: '你好啊' ,
isShow: true
}
} )
</ script>