vue-基础语法

一、用户代码的书写

1. 主文件
2. 设置用户代码片段
   （1）打开管理小图标，选中用户代码片段。
   
   （2）搜索vue.josn文件创建代码片段：（如下图实例）
   

（3）通过以上方式，便可在vue文件中使用 template显示出设置的代码块（便捷）

二、基础语法

1.数据绑定 {{}}

绑定表达式，表达式里面可以运算

代码：

<template>
  <div id="app">
   <!-- 1.数据绑定 -->
   <!-- 变量绑定 -->
   <div>{{msg}}</div>   
   <!-- 数组绑定 -->
   <div>{{arr}}</div>
   <!-- 对象的绑定 -->
   <div>{{obj.name}}</div>
  </div>
</template>

  data(){
    return{
		msg:"我是卖报的小画家",
		arr:[1,2,3],
		obj:{
			name:"xiaomin"
		}
    }
  }

结果：

• 特殊指令v-html，v-text：

   <!-- v-html -->
	<p v-html="innerHtml"></p>
   <!-- v-text -->
   <p v-text="innerText"></p>

data(){
    return{
		innerHtml:"<b>我是html<b>",
		innerText:"我是text文本",
    }
  }

结果：

2.属性绑定（v-bind：或：）

   <!-- 2. 属性绑定 v-bind:    可简写为 :-->
   <p v-bind:class="className"></p>
   <button :title="title">button</button>

  data(){
    return{
		className:"ha",
		title:"我是button"
    }
  }

结果：

3.循环渲染数据（v-for）

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key attribute：

<!-- 3.循环数据渲染  v-for    必须写：key-->
   <ul>
	   <li v-for="item in student" :key="item.name">
		 <p>{{item.name}}</p>
		 <p>{{item.sex}}</p>
	   </li>
   </ul>

 data(){
    return{
		student:[
			{
				name:"张三",
				sex:"女"
			},
			{
				name:"王五",
				sex:"男"
			},
			{
				name:"李四",
				sex:"女"
			}
		]
    }
  }

思考：为什么key键值不建议写index？
key的作用主要是为了高效的更新虚拟DOM。使用索引的话，当再次在数组数据中插入一组数据，此时的index对应发生了改变，就不能找到原先对应该索引的那组数据了。
因此需要为key添加的是一个唯一的id键值，确保后续vue能准确跟踪每个节点的身份。

4.class和style绑定

它们可以使用v-bind：绑定，在可以使用表达式的基础上，还可以使用数组和对象的方式。

 <!-- 4. class和style绑定   v-bind -->
   <!-- 绑定多个class名-->
   <!-- 用对象(根据条件添加)-->
   <div v-bind:class="{'add':true,'addcolor':isadd,'changecolor':!isadd}"></div>
   <!-- 用数组 （同时添加）-->
    <div v-bind:class="['add','changecolor']"></div>
   <!-- 直接绑定样式 -->
	<div v-bind:style="{'width':vw+'px','height':vh+'px','background-color':'red'}"></div>

data(){
    return{
		isadd:true,
		vw:100,
		vh:100
    }
  }

.add{
	width: 100px;
	height: 100px;
}
.addcolor{
	background: #000;
}
.changecolor{
	background:#aaa;
}

结果：

5.vue事件绑定（v-on: 或@）

 <!-- 5.vue事件绑定   v-on:type="function"  /  @type="function"-->
	 <!-- 操作元素的事件 --> 
	 <!-- 方法不加括号 -->
	 <button v-on:click="clickMe">按钮1</button>
	 <button @click="clickMe2">按钮2</button>

 methods: {
	  clickMe(){
		  console.log("点击我");
	  },
	  clickMe2(){
		  console.log("点击我2");
	  }
 }

结果：

事件修饰符

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

<!-- .stop -->
	 <div class="add"  @click="maopao">
		 <button @click.stop="maopao">stop按钮</button>
	 </div>

• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture：与事件冒泡的方向相反，事件捕获由外到内。即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

<!-- .capture -->
	<div class="d1" @click.capture="captureFun(1)"> 
		<div class="d2" @click.capture="captureFun(2)">
			<div class="d3" @click.capture="captureFun(3)">
			</div>
		</div>
	</div>

由内到外依次点击会出现：（1，2，3），（1，2），（1）

• .self：只会触发自己范围内的事件，不包含子元素。只当在 event.target 是当前元素自身时触发处理函数

<!-- .self-->
<ul>
	<li @click.self="selfFun">
		<span>我是li元素</span>
	</li>
</ul>

• .once：只会触发一次

<!-- .once-->
<button @click.once="onceFun">once</button>

• .passive 告诉浏览器你不想阻止事件的默认行为

以下是对应的事件执行方法：

 methods: {
	  maopao(){
		  console.log("我会阻止冒泡")
	  },
 	  selfFun(e){
		  console.log(e.target);
	  },
	  captureFun(num){
		console.log(num);
	  },
	  onceFun(){
		  console.log("once");
	  }
 }

事件的this指针指向

<!-- 事件的this指针问题 指向当前的vue组件 -->
 <button @click="getThis">事件里面的this指向问题</button>
 <button @click="get($event)">事件里面的this指向问题 --$event</button>

methods: {
	  getThis(){
		  console.log(this);
	  },
	  get(ele){
		  console.log(ele.currentTarget);
	  }
}

事件的执行参数 event

 <button @click="getEvent">事件的event</button>

methods: {
	 getEvent(event){
		  console.log(event);
	  }
}

事件委托

<!-- 把子元素事件委托给父元素执行-->
 <ul @click="ulPar">
	 <li>第1个li元素</li>
	 <li>第2个li元素</li>
	 <li>第3个li元素</li>
 </ul>

methods: {
	ulPar(e){
		  let node = e.target;
		  if(e.target.nodeName.toLowerCase()=="li")
			console.log(node);
	  }
 }

6.vue数据双向绑定 （mvvm）

<!-- 表单元素如input ：  指令v-model="" -->
 <input type="text" @change="changeData" v-model="changeMsg">
  <!-- 一般的v-bind是单向的 -->
 <input type="text" @change="changeData" :value="changeMsg">

data(){
    return{
    changeMsg:"我是测试文本"
    }
}
methods: {
	 changeData(){
		  console.log(this.changeMsg);
	  }
}

当对文本进行修改时， changeMsg也随之改变。

7.ref获取操作的dom元素节点

基础用法：本页面获取dom元素

<!-- (虚拟dom：提高浏览器性能，等到操作全部完成一次性渲染) -->
 <!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -->
 <button @click="getDom">获取dom元素</button>
 <div ref="refEle"></div>

methods: {
	getDom(){
		//   $refs 对象集合
		// $refs.refEle 对象.元素
		  let refs=this.$refs.refEle;
		  console.log(refs);
	  }