vue_基础知识点

vue_基础

首先给一个简单的例子作为开头，不涉及组件的vue一般是以这个方式书写的：

body:
	<div id='app'>
		<p>{{msg}}</p>
	</div>
script:
	var vm = new Vue({
		el:'#app',//new出实例，表示要控制某个区域
		data:{// 存放el要用到的数据
			msg:'hello'
		}
	})

使用vue的一个优势是：通过vue提供的许多指令渲染页面，省去许多dom操作
废话不多说，直接开始，简单的东西我们简单带过（写法类似于最上边提到的例子），比较复杂的（v-on，v-bind,v-model…）我会详细说,在后边有很多补充~
一. v-cloak
二. v-text
三. v-html
四. v-bind
五. v-on
六. computed，watch
七. v-if和v-show
八. v-for
九. v-model

1. v-cloak：解决插值表达式的闪烁问题

<p v-cloak>{{...}}</p>

2. v-text:也能解决闪烁问题

<p v-text="msg"></p>
区别：v-text是替换标签内全部内容的，但是v-cloak只是替换自己位置处的占位符
共同点：他们都能解决闪烁问题（即页面未接收到vue渲染时会不会将那部分源码显示），而且都是把msg中的内容当作文本内容来显示，计时遇到的是HTML代码（后边的v-html可以解决这个问题）

3. v-html：将HTML代码渲染进页面(替换标签内全部内容的类型)

<p v-html="msg"></p>

4. v-bind：用于绑定属性的指令,可以简写为 “:”（后边有详细介绍）

v-bind把mytitle解析为js表达式解析，所以在下例HTML中的mytitle后边可以加合法js表达式

body:
<div id='app'>
		<input type='button' value='click' :title="mytitle+'123'">
	</div>
script:
var vm = new Vue({
		el:'#app',//new出实例，表示要控制某个区域
		data:{// 存放el要用到的数据
			mytitle:'这是标题！'
		}
	})

5. v-on:提供事件绑定机制：（简写为@）（后边有详细介绍）

body:
<div id='app'>
		<input type='button' value='click' v-on:click="show">
	</div>
script:
var vm = new Vue({
		el:'#app',//new出实例，表示要控制某个区域
		data:{// 存放el要用到的数据
			msg:'hello',
		}
		methods:{
			show:function:(){alert('hool')}
		}
	})

6. 可以使用computed指令表示计算属性，使用watch指令表示侦听器：

<div id="root">
    <div>
        <input v-model="firstName"/>
        <input v-model="lastName"/>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
</div>
<script>
     var v1 = new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:"",
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName +" "+ this.lastName
            }
        },
        watch:{//侦听器，当fullName开始改变时启动
            fullName:function(){
                return this.count++
            }
        }
    })
</script>  

计算属性默认只有getter，可以在需要时添加setter：

<div id="demo">{{ fullName }}</div>

data:{
            firstName:"",
            lastName:"",
            count:0
        },
        computed:{
			fullName:{
				get:function(){
                	return this.firstName +" "+ this.lastName
            	}
				set:function(){//用来定初始值什么的
                	var names = newValue.split(' ')
      				this.firstName = names[0]
      				this.lastName = names[names.length - 1]
            }
			}
            
        }

7. v-if和v-show

我们可以使用v-if和v-show来控制元素的显示与否，二者的区别在于：当传入的显示值是false时，v-if会在页面上将控制的dom删除掉，而v-show会改变dom的css为display：none

<div id="root">
    <div v-if="show">hello world</div>
    <div v-show="show">你好，世界</div>
    <button @click="handleClick">toggle</button>
</div>
<script>
    var v1 = new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show
            }
        }
    })
</script>

另外还有v-else,和v-else-if可以匹配v-if使用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

8. 使用v-for来循环展示list：

item是数组元素迭代的别名，下例是有两个参数的情况

<div id="root">
    <ul>
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
</div>
<script>
 
    var v1 = new Vue({
        el:"#root",
        data:{
            list:[1,2,3]
        }
    })
 
</script>

当有一个参数时，可以这样迭代数组，对象当然也可以，我们可以通过对象的属性来迭代.

body:
<ul id="example">
	<li v-for="item in items">//这个in的地方用of也可以
		{{item.message}}
	</li>
</ul>
js:
var example = new Vue({
	el:"#example",
	data:{items:[
			{message:'1'},
			{message:'2'},
		}]
	}
})

注： **v-for纠缠到数组，它可以使用es6中 的变异方法push,pop,shift,unshift,splice,sort,reverse操作，比如：example1.items.push({ message: 'Baz' })，再如非变异方法：filter(), concat() 和 slice() ,但是不能直接用item改变数组长度和值，需要用set或者splice，如：Vue.set(vm.items, indexOfItem, newValue) **

还可以显示过滤结果，除了用computed以外，如下例：

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

可以取得一部分整数

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-bind具体补充

• 我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

PS:它的对象语法看着很像css语法但实际上是js对象，一定不要忘记外边的引号，因此为了避免混淆，直接绑一个样式对象更好

• 直接内联定义在模版里：

<div v-bind:class="classObject"
></div>

data: {
	classObject:{
		isActive: true,
  		hasError: false
	}
}

• 可以绑定后面说的可以返回对象的计算属性：

<div v-bind:class="classObject"
></div>

data:{
            isActive: true,
  			Error: null
        },
        computed:{
            classObject:function(){
                return {
					active:this.isActive && !this.Error,
					'text-danger': this.error && this.error.type === 'fatal'
				}
            }
        }

• 可以把数组传给v-bind：calss来应用class列表

<div v-bind:class="[activeObject,errorClass]"
></div>

data: {
	activeObject:'active',
	errorClass:'text-danger'
}

v-on具体补充

众所周知，v-on是拿来绑定事件的，即监听dom事件，这样便于我们在HTML里扫一眼就知道什么绑定了什么事件，避免了无谓的dom操作，在移除时也非常方便，这里介绍几点：

• 可以直接把简单js代码写进v-on事件中，有data可以写进data部分去，例如：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

• v-on中简单的跟一个需要调用的方法名，具体方法当然在methods里写啦，例如：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

• 当然也可以内联调用

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

• 然后是它可使用许多事件修饰符和按键修饰符，例如：v-on:click.stop="doThis"<!-- 阻止单击事件继续传播 -->
  如下：
  .stop 阻止事件继续传播
  .prevent
  .capture 添加事件监听器时使用事件捕获模式
  .self
  .once
  .passive
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
  注意的是事件修饰符可以串联，但是顺序不一样时功能会有区别：

v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

9.v-model

• v-model是表单双向绑定,ta负责监听用户对表单的操作以更新数据
• 它可以绑定诸如单选框，复选框，文本框，单选按钮和动态选择框，也可以加一些修饰符
• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
• v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

需要注意的地方是：

使用表单双向绑定时注意三个位置的统一，这三个位置分别是

1. HTML中的表单元素v-model:"XXX"
2. 绑定显示区域例如<p>XXX</p>
3. js中data:XXX:。

然后每种表单元素默认绑定的内容有所不同：

• 例如单个复选框（checkbox）默认绑定他的"checked"是true还是false,如果想显示别的，可以在v-model后加类似 true-value="yes" false-value="no"的语句
• 单选按钮，多个复选框（checkbox）的话默认绑定他的value值，特殊的是多个复选框在data中的应该是个数组，毕竟多个嘛
• 文本框绑定的则是input里所输入的内容
• 选择框(select)单选和多选绑定的都是option里的内容（option.value），区别只有多选时data也是一个数组喔~

下面是一些例子:

• 文本：

body：
 <!-- 多行文本 -->
            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ msg }}</p>
            <textarea v-model="msg" placeholder="add multiple lines"></textarea>
script：
var vm2 =  new Vue({
            el:'#ex1',
            data:{
                msg:'HI'
            }
        })

• 复选框：

body：
 <!-- 单个复选框 -->
            <div>
                <input type="checkbox" id="checkbox" v-model='checkV'>
                <label for="checkbox">{{checkV}}</label>
            </div>
<!-- 多个复选框 -->
        <div>
                <input type="checkbox" id="jack" value="Hank" v-model="checkNames">
                <label for="jack">Jack</label>
                <input type="checkbox" id="john" value="John" v-model="checkNames">
                <label for="john">John</label>
                <input type="checkbox" id="mike" value="Mike" v-model="checkNames">
                <label for="mike">Mike</label>
                <br>
                <span>Checked names: {{ checkNames }}</span>
        </div>
script：
var vm2 =  new Vue({
            el:'#ex1',
            data:{
                checkV:'',
				checkNames: []
            }
        })

• 单选按钮和多选框：

body：
<!-- 单选按钮 -->
            <div>
                <input type="radio" value="选1" id="one" v-model="vle">
                <label for="one">one</label>
                <input type="radio" value="选2" id="two" v-model="vle">
                <label for="two">two</label>
                <p>youe choice:{{vle}}</p>
            </div>
            <!-- 多选框 -->
            <div>
                <select v-model="selectMore">
                    <option>a</option>
                    <option>b</option>
                    <option>c</option>
                    <option>d</option>
                </select>
                <p>selected:{{selectMore}}</p>
            </div>
script：
var vm2 =  new Vue({
            el:'#ex1',
            data:{
                vle:'',
                selectMore:[]
            }
        })

最后是v-model可以用的修饰符：

.lazy: 变为change事件同步，而不是input
.trim：去掉空格
.number：自动将输入的值转为数字型