首先运行项目 npm run dev
然后打开src/App.vue,去掉多余的部分如下:
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
}
}
</script>
<style lang="scss">
</style>
可以看出一个Vue文件最基本由template,script,css组成。
文本插值:
字符串: msg:‘Hello world’-------------------{{msg}}
对象:obj0:{name:‘same’,age:‘23’}---------{{obj0.name}} {{obj0.age}}
数组:list0:[1,2,3,4,5]--------------------------<ul> <li v-for="item in list0">{{item}}</li> </ul>
对象数组:
list1:[{name:'same',age:'23'},{name:'kk',age:'25'},{name:'tony',age:'26'}],
<!--{{index}}表示数组下标-->
<template>
<div id="app">
<ul>
<li v-for="(item,index) in list1">name:{{index}}{{item.name}},age:{{item.age}}</li>
</ul>
</div>
</template>
比较复杂的对象数组(对象中带有数组):
list2:[
{
type:'国内资讯',
list:[
{title:'国内1',time:'2018-09-09'},
{title:'国内2',time:'2018-09-08'},
{title:'国内3',time:'2018-09-07'},
{title:'国内4',time:'2018-09-06'},
]
},
{
type:'国际资讯',
list:[
{title:'国际1',time:'2018-09-09'},
{title:'国际2',time:'2018-09-08'},
{title:'国际3',time:'2018-09-07'},
{title:'国际4',time:'2018-09-06'},
]
},
]
<!--模板(两个for循环)-->
<template>
<div id="app">
<ul>
<li v-for="item in list2">
type:--{{item.type}}
<ol>
<li v-for="subitem in item.list">title: {{subitem.title}}----time:{{subitem.time}}</li>
</ol>
</li>
</ul>
</div>
</template>
原始 HTML
直接使用{{}}并不能输出预料中的html,这是需要v-html
<div>使用v-html------<span v-html="html1"></span></div>
html1:'<span style="color:red">这是一个HTML</span>'
特性(html属性,href,src等)
我们并不能这样写<img src="{{imgurl}}" alt=""/>
,官方文件规定:Mustache 语法不能作用在 HTML 特性上,即不能再html标签的属性上使用{{}}来赋值。
我们使用 v-bind:src=“somedata” 或 :src="somedata"
imgurl:'https://img-ads.youkuaiyun.com/2018/201809060944011099.jpg'
<img v-bind:src="imgurl" alt=""/>
触发事件:
点击事件为例:v-on:click=“fn()” 或 @click=“fn()”,fn()写在mothods:{}里边
具体代码(注意必须有一个根节点):
<template>
<div id="app">
<h1>{{ msg }}</h1>
<h2>name:{{obj0.name}},age:{{obj0.age}}</h2>
<ul>
<li v-for="item in list0">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in list1">name:{{item.name}},age:{{item.age}}</li>
</ul>
<ul>
<li v-for="item in list2">
type:--{{item.type}}
<ol>
<li v-for="subitem in item.list">title: {{subitem.title}}----time:{{subitem.time}}</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Hello World',
obj0:{name:'same',age:'23'},
list0:[1,2,3,4],
list1:[{name:'same',age:'23'},{name:'kk',age:'25'},{name:'tony',age:'26'}],
list2:[
{
type:'国内资讯',
list:[
{title:'国内1',time:'2018-09-09'},
{title:'国内2',time:'2018-09-08'},
{title:'国内3',time:'2018-09-07'},
{title:'国内4',time:'2018-09-06'},
]
},
{
type:'国际资讯',
list:[
{title:'国际1',time:'2018-09-09'},
{title:'国际2',time:'2018-09-08'},
{title:'国际3',time:'2018-09-07'},
{title:'国际4',time:'2018-09-06'},
]
},
]
}
}
}
</script>
运行结果如下:
class与style
Class绑定
对象语法
:class="{red:true,f12:nosmall}" ====>{类名:boolean}
:class="classObj"====>data里的对象名 classObj : {类名:boolean}
:class="classNew"====>计算属性返回一个对象 computed : {对象名(){return obj{类名:boolean} }}
数组语法:
:class="[redClass,f12Class]" ====> data里 return {变量名:类名}
一些表达式
数组里内嵌对象
style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }" ====》 {样式名:data绑定的值}
:style="styleObject" ====> classObj : {样式名 : 值}
示例
<template>
<div>
<div class="center" :class="{red:true,f12:nosmall}">使用对象语法1{类名:boolean}</div><!--<div class="center red"></div>-->
<div class="center" :class="classObj">使用对象语法2(直接使用data里对象)</div><!--<div class="center f12"></div>-->
<div class="center" :class="classNew">使用对象语法(计算属性返回一个对象obj:{类名:boolean})</div><!--<div class="center red"></div>-->
<div class="center" :class="[redClass,f12Class]">使用数组语法 data里 return {变量名:类名}</div> <!--<div class="center red f12"></div>-->
<div class="center" :class="[isred?redClass:'',f12Class]">使用数组语法</div> <!--<div class="center red f12"></div>-->
<div class="center" :class="[{red:isred},f12Class]">使用数组语法(内嵌对象)</div> <!--<div class="center red f12"></div>-->
<div style="text-align:center" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定样式对象语法 {样式名:data绑定的值}</div>
<div style="text-align:center" v-bind:style="styleObject">绑定样式对象语法 obj:{样式名:data绑定的值}</div>
<div style="text-align:center" v-bind:style="[styleObj,backgroundObj]">绑定样式数组语法</div>
</div>
</template>
<script>
export default{
data(){
return {
//对象语法
isred:true,
nosmall:false,
classObj:{
red:false,
f12:true,
},
//数组语法
redClass:'red',
f12Class:'f12',
activeColor:'red',
fontSize:12,
styleObj:{
color:'red',
fontSize:'12px'//注意这里使用font-size会报错,vue会将fontSize自动转换成font-size
},
backgroundObj:{
background:'green',
}
}
},
computed:{
classNew(){
return {
red:this.isred,
f12:this.nosmall
}
}
}
}
</script>
<style>
.center{
text-align:center;
}
.red{
color:red;
}
.f12{
font-size:12px;
}
</style>
computed,watch,methods
计算属性computed有缓存,当依赖的数据发生改变时才会重新计算,其他数据发生改变时并不会触发计算。
侦听属性watch可以侦听数据的变化,但写起来会比computed麻烦,但是有些场合还是需要用到watch
方法methods,没有缓存。
综上如果一个功能可以使用上述3个方法实现,优先使用computed
条件渲染:
v-if与v-show的区别在于v-if=“false"时,会整个dom消失,而v-show是加上display:none。
在input加上key是为了避免vue复用页面上的组件,标注key,说明这个元素是唯一的。
<div v-if="show"><input key="name"></div>
<div v-else-if="show"><input key="password"></div>
<div v-else></div>
列表循环
数组循环
更改list不能使用下标直接更改,使用push pop shilft unshilft splice reverse
改变引用地址如:this.list=[]
<div v-for="item of list">{{item}}</div>
<div v-for="(item,index) of list">{{item}} ------- {{index}}</div>带上index
<div v-for="item of list" :key="item.id">{{item}}</div>使用key可以提供性能
对象循环
改变对象
改变引用地址如:this.obj={}
<div v-for="item of obj">{{item}}</div>
<div v-for="(item,key) of obj">{{item}} ------- {{key}}</div>带上index
<div v-for="(item,key,index) of obj">{{item}} ------- {{key}}------- {{index}}</div>带上index
<div v-for="item of list" :key="obj.id">{{item}}</div>使用key可以提供性能