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++