vue基础语法（vue2)

vue基础语法

定义在类中的是方法

方法：

name:function(){
	
}
name(){
	
}

{{}}:用在内容中，而不为属性

调用function一般要加（）

v-once:修改一次，第一次改完，第二次后都不改变

v-tml:将tml标签解析 <div v-tml="data"></div>

v-text:解析成文本 与{{data}}用法类似，而且覆盖后面的{{data}}数据

<div v-text="data"></div>

v-pre:原封不动的表现数据

<div v-pre>{{data}}</div>
//data:world---->表现为{{data}}

v-cloak:斗篷，在vue解析前有他v-cloak，在解析后没有，

<div v-cloak></div>
[cloak]:{
	display:none
}

v-bind:绑定属性，语法糖::

<img :src="data"></img>
<img v-bind:src="data"></img>
a标签的链接也是这样
//data:xxx.png

绑定class也是可以的
<div :class='active'></div>
//active:"active"  可以放对象
<div :class="{类名1:true,类名2:boolean}"></div>
<div :class="{active:isActive,line:isActive}"></div>
//通过修改布尔值来决定属性是否出现    active line

//可以动态绑定为类，也可以数组语法"['active','line']";不灵,可以用function来return
// :class="['active','line']"	success
//:class="[active,line]"	fail

:style="{key:value}" 如果是value没有加上''就是变量,加了就是字符
:style="[{},{}]"{key:value}

点击:v-on:click="cilick"

v-for:

v-for:"(item,index) in data"
v-for="data"
v-for="a in data"

组件

驼峰标识：font-size=fontSzie

computed:计算属性，当我们需要对某种数据进行变化时
不加（）
本质是一个属性,可以对他进行类的封装，进行set和get方法设置
计算属性是有缓存的
一般是没有set方法，所以是只读属性，所以最后呈现形式就是

属性：function(){
	return xxxx;
}
//或者
属性(){
	return xxx;
}
//set方法如果想要实现，也是会有数据的
fullname:{
	set:function(newValue){
		console.log('-----',newValue);//newValue
	}
	get:function(){
		return xxx;
	}
}

computed和methods对比

• computed只调用一次，如果数据没变化，内部有缓存
• methods调用多次，相当于重新计算

ts:类型检测

v-on:事件监听

v-on:click="方法"
@click="方法"
@click="方法(item)"
如果没有小括号，但本身需要参数，此时，会将浏览器生成的event传过去

v-on的修饰符，可以处理事件冒泡

stop
事件冒泡：
@click.stop="方法"，防止事件冒泡

.prevent event,preventDafault

监听键盘点击
@keyup="keyup"    松开键盘才有
@keyup.enter="keyup"  回车

.navie
.once,只触发一次回调

v-if v-else-if v-else

input服用问题联合v-if

<input v-if="user" placeholder="用户" />
<input v-else placeholder="邮箱" />
<button @click="user=!user">点击</button>

//虚拟dom到网页，出于性能考虑，会尽可能复用，解决方法使用Key
<input v-if="user" placeholder="用户"  key="user"/>
<input v-else placeholder="邮箱" key="email" />
<button @click="user=!user">点击</button>

v-show:决定某个元素是否显示 和v-if类似

v-if是删除，如果是false，根本不会存在
v-show，增加了一个行内样式，元素还在，dispaly:None

如果显示和隐藏频繁时，用v-show
只有一次切换用,v-if
<div v-if="true">{{data}}</div>
<div v-show="true">{{data}}</div>
<div v-show="false">{{data}}</div>//<div display:none>{{data}}</div>

v-for

v-for="(item,index) in data"
v-for="(value,key) in data"
v-for="(value,key,index) in data"

给v-for添加上key属性，为了保证不一样，独特，更够更好的复用，一般绑定Key，:key=item

函数

function(...sum)：连续传参
sort：排序
reverse：反转
splice：删除，更新，插入
push:插入最后一个
pop：弹出最后一个
unshift：插入地瓜叶i
shift:删除第一个
toFixed:保留几位小数

for each
for of
fo in 
map
reduce
filter:

v-model:

数据双向绑定 
默认绑定类型为string
e.target.value
互斥
表单提交
name='sex',name一样只能选一个

label的好处，可以点击文字也能使框选中
value：获取值

radio:单个值	name:
checkbox：多个值，数组	单个值：布尔值

值绑定：动态绑定数据，标签里的数据，比如input里的value值，类似v-bind，：

修饰符：v-bind后加个.
同理
v-model加个点.
有时候我们并不希望，数据改变跟随哦那个用户键盘输入改变而改变，而是等到敲回车----->lazy
v-model.lazy="data"

v-model.number  绑定为数值类型，将输入的字符数字变为number类型

v-model.trim:去除空格