vue学习笔记--常用命令（一）

{{ }}

两对花括号用来显示渲染DOM：{{变量或方法(js代码)}}

<div>{{username}}</div>//直接显示变量
<div>{{index+1}}</div>//可以进行运算
<div>{{testAction()}}</div>//可以调用方法

v-text

文本显示，有点类型{{}}显示，用这种可以避免网速不好时，页面渲染出{{}}

<div v-text='username'></div>

v-html

与v-text一样，可以显示变量内容，但是v-html 可渲染html片段，但要慎用，防黑客攻击

<div v-html='username'></div>//直接显示变量
<div v-html='domh2'></div>//textUl="<h2>hello</h2>"

v-if

条件命令，控制一个元素是否可以显示
v-if=“变量或表达式返回的布尔值”，true显示，false隐藏。
可以与v-else连用

<p v-if="isSeen">现在你看到我了</p>//isSeen是布尔值
<p v-if="length > 5">现在你看到我了</p>

v-show

条件命令，控制一个元素是否可以显示
v-show=“变量或表达式返回的布尔值”，true显示，false隐藏。

<p v-show="isSeen">现在你看到我了</p>//isSeen是布尔值
<p v-show="length > 5">现在你看到我了</p>

v-if与v-show的区别：当返回值是false不显示时，v-if是把元素注释删除掉了，而v-show是使用元素属性display:none隐藏掉，性能的话v-show应该要好一些，因为重新显示元素时，v-show只是改变了display：block，而v-if需要重新编译生成元素。

性能消耗：

v-if有更高的切换消耗；v-show有更高的初始渲染消耗

使用选择：

v-if适合运营条件不大可能改变；v-show适合频繁切换。

循环v-for

1、循环数组：

        <ul>
            <li v-for="(item,index) in arr">{{item}}</li>
        </ul>

2、循环对象

        <div v-for="(value,key) in object">
            {{key}}---{{value}}
        </div>

3、循环数字
该循环可以模拟数据，以下代码可循环出1 2 3 4 5 五个数字

<ul>
    <li v-for="(num,index) in 5">{{num}}---{{index}}</li>
</ul>

事件监听器(事件绑定)v-on

v-on可以用来绑定事件，通过它可以调用在vue实例中定义的方法，v-on:事件类型=“事件名”
恶意简写为@事件类型=“事件名”

<button v-on:click="userAdd">添加</button>
<button @click="userAdd">添加</button>

属性绑定v-bind

v-bind:src=“变量” 属性绑定，可简写为:src

v-bind:src="imgUrl"		imgUrl为变量
:src="imgUrl"		imgUrl为变量

双向绑定v-model

它能轻松实现表单输入和应用状态之间的双向绑定

  <p>{{ message }}</p>
  <input v-model="message">

渲染一次v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

vue实例中定义数据，或者初始化数据

//为组件间不产生相互的影响，建议使用函数返回的形式
data:function(){
	return {
		username:"zhangsan"
	}
}

vue实例中定义方法

methods:{
	f1:function(){
		data中的数据，要用this.变量
		this.username
		可以直接调用方法
		this.fn()
	},
	//对象的函数简写
	f2(){}
}