vue的特点以及常用的标签

特点

1.vue是一个渐进式框架，什么是渐进式呢？

1. 渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
2. 或者如果你希望将更多的业务逻辑使用vue实现，那么vue的核心以及其生态系统
3. 比如core+vue+vuex，也可以满足你各种各样的需求
   2.vue的特点和一些常见web高级功能
4. 解耦视图和数据
5. 可复用的组件
6. 前端路由技术
7. 状态管理
8. 虚拟dom

vue中常用标签

1. v-for

data(){
return {
arr:['美人鱼','少林足球','唐伯虎点秋香']
}
}
<ul>//需要绑定key值以后再说
<li v-for="item in arr">{{item}}</li>
</ul>

2. v-once

//该指令不需要跟任何表达式
//该指令表示元素和组件只渲染一次，不会随着数据改变而改变
<div v-once>{{message}}</div?
data(){
return {
message:'hello word'
}
}

3.v-html

//可以转化html片段成常见的页面
<h1>{{message}}</h1>
data(){
return {
message:'<a href="www.baidu.com">百度一下</a>'
}
}

4.v-text

//v-text和Mustche语法比较相似：都是用于数据显示界面
//v-text通常情况下接受一个string类型
<div>
<span v-text='message'>12121</span>会覆盖123312
<span>{{message}}</span>
</div>
data(){
return {
message:'wuchuangsheng'
}
}

5.v-pre

//跳过这个元素和子元素的编译过程，只显示原本的mustche语法内容

6.v-cloak

//在某些情况下，可能会显示出来为编译的mustche标签
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak>{{message}}</div>
data(){
return {
message:'2323"
}}

7.v-bind

//绑定某些动态属性（src,href)
<div>
<a :href="hturl"></a>
<img :src="imgUrl">
</div>
data(){
return{
hturl:'www.baidu.com',
imgUrl:'xxxxxx'
}
}
//动态绑定class
<h2 :class="{类名：Boolean，类名：boolean}">ewewew</h2>
<h2 :class="[类名，类名]">ewewew</h2>
//动态绑定style
:style = '{color: currentColor,fontSize:fontSize+"px"}
:style='[baseStyle,overstyle]'

8.computed

<div>{{fullName}}</div>
computed:{
fullName(){
return this.fistName + this.lastName
}
}
//computed中setter属性和getter属性
fullName:{
get(){
console.log('--------')
return this.firstName + this.lastName
}
set(newValue){
var arr = newValue.split(' ')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
//计算属性具有缓存功能
//计算属性多次调用只执行一次额

9.const

//const a = 20
a = 30 //不可复制
const a //声明时必须赋值
//const指定对象不能改但是属性可以i修改

10. v-on

//事件监听
//如果事件不需要参数可以不用加（）
<h1 @click =  'handleAdd'></h1>
//需要传参而且需要获得事件event
<h1 @click = 'handleClick(10,$event)'></h1>
methods：{
handleAdd(){
this.count++;}
handleClick(num,event){
console.log(num,event)
}
}