instrucciones del sistema común Vue

expresión de interpolación

La forma más común de enlace de datos, el más común es el uso de la expresión de la interpolación, la redacción es {{}} expresión escrita

例如: <span> Mensaje: {{mensaje}} </ span>

Nota: 1. La palabra debe ser, debe ser una expresión válida js (si otra persona para el interruptor no puede escribir)

2. Debe haber un valor de retorno

comandos comunes

v-manto

Correcciones de expresión parpadeo de interpolación para ser utilizado en combinación y estilos css

<! - Después de añadir estilos CSS v-capa y de control en el lapso, el navegador lapso de tiempo primera carga oculta, conocer el futuro Vue crea una instancia completado, será retirado de la duración de v-capa, perderá papel lapso de CSS en el contenido que se presenta al usuario ->
<span V-Capa> MSG {{}} </ span>

nueva Vue ({
datos: {
msg: 'hola ivan'
}
})

v-texto

Para reemplazar el texto de la etiqueta (reemplazará completamente el contenido de la etiqueta original no se reconoce html)

<! - pieza V-texto del texto se puede volver a los elementos especificados, por ejemplo: ->
<div V-text = "MSG"> </ div>
nueva nueva Vue ({
Datos: {
MSG: 'Hola mundo'
}
});

<- :! de salida ->
<div> Hello World </ div>

v-html:

Para volver a colocar etiquetas de contenido web (contenidos reemplazarán por completo la etiqueta original)

<div v-html = "RAWHTML"> </ div>
nuevos Vue ({
datos: {
RAWHTML: '<h1> Hello World </ h1>'
}
})

v-vinculará:

Se puede enlazar con el atributo de la etiqueta, se requiere que el valor de una variable atributo / tipo de valor, por defecto, v-bind puede omitirse

1, src img adquirieron de la variable imagesrc
<img v-bind: src = "imagesrc">

2, de la clase classA con, el valor de ClassB dos variables como el valor de la clase,
el resultado es: <div class = "A B"> clase classA con, ClassB </ div>
<div V-bind: class = "[clase classA con, ClassB]"> classA, ClassB </ div>

3, isRed si la variable es cierto, el valor de la clase es de color rojo, de lo contrario no
<div v-bind: class = "{rojo: isRed}"> isred </ div>

4、div的class属性值一定有classA变量的值，而是否有classB和classC变量的值取决于isB和isC是否为true，二者一一对应
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>

5、变量加常量
<div v-bind:style="{ fontSize: size + 'px' }">size22</div>

6、变量加常量的另一种写法
<img v-bind="{src:imageSrc+'?v=1.0'}" >

7、对象数组
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

缩写形式
<img :src="imageSrc">
<div :class="[classA, classB]">classA, classB</div>
<div v-bind:class="{ red: isRed }">isred</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
<div v-bind:style="{ fontSize: size + 'px' }">size22</div>
<img v-bind="{src:imageSrc+'?v=1.0'}" >
<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

vue对象初始化
<script>
// 实例化vue对象（MVVM中的View Model）
new Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 数据（MVVM中的Model）
imageSrc:'http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png',
isRed:true,
classA:'A',
classB:'B',
isB:true,
isC:true,
size:22,
styleObjectA:{color:'red'},
styleObjectB:{fontSize:'30px'}
},
methods:{

}
})
</script>

v-on

1、作用：可以给标签绑定事件我们可以给事件入参$event对象，然后在事件中就可以获取到当前绑定事件的元素了v-on和v-bind一样，v-on默认也可以省略

2、常用事件：
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....

3、示例：

<button v-on:click="doThis"></button>

<button v-on:click="doThat('hello', $event)"></button>

<form v-on:submit.prevent></form>

5、v-on的缩写形式：可以使用@替代 v-on:
<button @click="doThis"></button>

6、按键修饰符
触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件

写法：
<input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件

由于回车键对应的keyCode是13，也可以使用如下替代
<input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件

但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法：
1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为：

Vue.config.keyCodes.a = 65
<input type="text" @keydown.a="kd1"> 这样即可触发

2、也可以之间加上a对应的数字65作为按键修饰符
<input type="text" @keydown.65="kd1"> 这样即可触发

键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

v-on按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

v-for

item in Array
(item, index) in Array
value in Object
(value, key, index) in Object

:key属性具有唯一性，不能重复，它能够唯一标识数组的每一项
将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考https://www.zhihu.com/question/61064119/answer/183717717

注意：以下变动不会触发视图更新
1. 通过索引给数组设置新值
2. 通过length改变数组
解决：
1. Vue.set(arr, index, newValue)
2. arr.splice(index, 1, newValue)

<ul>
<li v-for="item in user">{{item.name}}</li>
<li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
<li>---------------华丽的分割线---------------</li>
<li v-for="value in boss">{{value}}</li>
<li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
user: [
{name: 'jack'},
{name: 'neil'},
{name: 'rose'}
],
boss: {
name: '马云',
age: 50,
money: 1000000002030
}
}
})
</script>

v-if

1、作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建

2、示例：

{{#if isShow}}
<h1>Yes</h1>
{{/if}}

通常我们使用写法居多：
<h1 v-if="isShow">Yes</h1>

也可以用 v-else 添加一个 “else” 块：
<h1 v-if="isShow">Yes</h1>
<h1 v-else>No</h1>

注意：v-else 元素必须紧跟在 v-if 元素否则它不能被识别。

new Vue({
data:{
isShow:true
}
});

v-show

1、根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素

2、示例：
<h1 v-show="isShow">Yes</h1>

new Vue({
data:{
isShow:true
}
});

3、v-if和v-show的总结：
v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中，而v-show
是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-model

1、在表单控件或者组件上创建双向绑定
2、v-model仅能在如下元素中使用：
input
select
textarea
components（Vue中的组件）

3、举例：
<input type="text" v-model="uname" />

new Vue({
data:{
uname:'' //这个属性值和input元素的值相互一一对应，二者任何一个的改变都会联动的改变对方
}
})