vue 2.0入门总结第一弹

template模板只能有一个子结构。
输入快捷键：alt+shift+向下箭头。

vue默认模块展示

<template>
	<div id="abc">
	</div>
</template>
<script>
	export default{
		name:"abc",
		data(){
			return{
				//数据源
			}
		}
		methods:{
			//方法区域
		}
	}
</script>

vue的模板语法

在vue构造器中有一个el参数，它是DOM元素中的id，定义之后接下来的改动就全部在指定div里，其外部不受影响。
data用于定义属性，实例中有三个属性分别为site，url，alexa。
methods用于定义函数，可以通过return来返回函数值。
它使用了基于HTML的语法，允许开发者声明式的将DOM绑定至底层vue实例的数据。结合响应系统，在应用状态改变时，vue能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

数据绑定

数据绑定主要分为单向数据绑定，对象值的直接绑定，用v-text和v-html进行绑定。
属性绑定主要用v-bind，它的缩写是空格。利用v-bind可以进行。
数据双向绑定主要用v-model，表单元素标签可以使用。

<template>
  <div id="first">
    
   <!-- 单向数据绑定，文本插值，双括号可以用于输出对象属性和函数返回值-->
    <h4>{{a}}</h4>
   <!-- 对象值直接绑定  -->
    <div>{{obj.name}}</div>
    <!--也可以用来绑定表达式，会直接输出结果-->
    <div>{{5+5}}</div>		//输出10
   <!-- 用v-text和v-html 进行绑定-->
    <p v-text="b"></p>
    <p v-html="c"></p>

    <!-- 属性的绑定 v-bind,它的缩写是空格 -->
    <img src="../static/logo.png" alt="" v-bind:title="til">
    <!-- 绑定class，绑定style样式 -->
    <div v-bind:class="clsn" v-bind:style="clsn_style"></div>
    <!-- 根据后面的true和false来选择元素样式，为true的称为元素样式，如果都为true两个都显示，若属性相同第二个覆盖第一个 -->
    <div v-bind:class="{'box1':is1,'box2':is2}"></div>
    <!-- 分开绑定元素样式 -->
    <div v-bind:style="{'width':w,'height':h,'backgroundColor':bgcolor}"></div>
    <div :style="clsn_style"></div>
    <!-- 数据双向绑定 当内容改变数据库中的内容页同时发生更新-->
    <input v-model="message"/>
    <p>{{message}}</p>
    <!-- 元素的显示隐藏 带有v-show的元素始终会被渲染并保留在DOM中，他只是切换了元素的css的displays属性-->
    <div v-show="ishow">你看见我了</div>
  </div>
</template>
<script>

export default {
  name: 'first',
  data(){
    return {
      //这个对象是指当前组件的数据源
    a:"how are you?",
    b:"<span>第一个文本</span>",
    c:"<span>第二个文本</span>",
    til:"vue图片",
    clsn:"def",
    clsn_style:{
      width:"100px",
      height:"100px",
      border:"1px solid red"
    },
    is1:true,
    is2:false,
    w:"200px",
    h:"300px",
    bgcolor:"pink",
    obj:{
      name:"张美丽"
    }
    }

  }
}
</script>

<style>
.box1{
  width:100px;
  height:100px;
  border:1px solid green;
}
.box2{
  width:200px;
  height:200px;
  border:1px solid blue;
}
</style>

这里要注意的是尽量要减少v-html的使用，防止xss攻击，若是有人在插入的代码中嵌入脚本代码，则很容易进入钓鱼网站。
如：

<template>
	<div id="abc" v-html="daima">
	</div>
</template>
<script>
	export default{
		name:"abc",
		data(){
			return{
				daima:'<h3>你好</h3><script>钓鱼网站</script>'
				//数据源
			}
		}
		methods:{
			//方法区域
		}
	}
</script>

事件

事件绑定

使用v-on监听事件，来对用户的输入进行响应。其缩写为@符号。举例：<div @click="abc"></div>
事件绑定执行的方法，也就是函数，可以带括号也可以不带括号。可以进行参数的传递。这里直接用一个实例来演示

   <!-- 事件绑定 -->
    <!-- 字符串的翻转 -->
    <input type="text" v-model="rev"/>
    <button v-on:click="reversem">按钮</button>
<script>
	export default{
	methods:{
    	reversem:function(){
      	this.rev=this.rev.split('').reverse().join('')
    	}
	}
}
</script>

事件的冒泡和捕获

阻止事件冒泡的修饰符是：.stop如v-on:click.stop="maopao()"由里到外执行。在js中，使用stopPropagation来阻止冒泡事件。
把事件变为捕获的修饰符是：.capture由外到里执行，连续利用stop也可以阻止。v-on:click.capture.stop="buhuo()
阻止事件的默认行为的修饰符是：.prevent事件的默认行为就是不需要自己编写代码，浏览器自身具有的一种功能。如击右键弹出默认菜单栏选项等。
修饰符可以连用v-on:click.capture.stop="buhuo()
passive：滚动事件默认触发，可提高移动端响应效率，不会在onscroll之后才执行。切记不能与prevent一起使用，不然prevent就会失效。
一次性事件绑定：once，就是只执行依次，之后再有不再执行。
精准触发事件绑定：self,使用了它之后，它只会因为本身触发事件而执行，而不是通过别的事件的冒泡或者捕获而触发。也可以用它来进行部分冒泡阻止。

<!-- 事件冒泡 -->
    <div @click="log(1)"> 
      <div @click="log(2)" >
        <div @click="log(3)" class="maopao"></div><!-- 点击后输出结果依次为3，2，1 -->
       <!-- 若是变为<div @click.stop="log(3)" class="maopao"></div>就只输出了3-->
      </div>
    </div>
    <!--事件精准触发 -->
    <div @click.capture="log(1)"> 
      <div @click.capture="log(2)" >
        <div @click.capture.stop="log(3)" class="maopao"></div><!-- 事件捕获事件在运行到这一步时不会触发这个click事件。 -->
      </div>
    </div>
    <script>
      methods:{
    	reversem:function(){
      		this.rev=this.rev.split('').reverse().join('')
   		},
    	log:function(e){
      		console.log(e);
   		}
  }
    </script>

键盘事件

键盘事件修饰符，也可以写键的ascii码。

键盘事件修饰符	作用
.enter	enter键
.tab	tab键
.delete	(捕获“删除”和“退格”按键)
.esc	取消键
. space	空格键
. up	上
. down	下
.left	左
. right	右
.page-down	翻页

 <!--事件精准触发,当只有当按下enter键时触发 -->
<button type="text" v-on:keydown.enter="changeList">hhhhh</button>

自定义别名：

vue.config.keycodes.f1=112

系统修饰符
有：.ctrl .alt .shift .meta

 <!--事件精准触发,当按住ctrl且点击的时候才会触发 -->
  <button type="text" @click.ctrl="changeList">hhhhh</button>

鼠标按钮修饰符
有left，right，middle
exact修饰符
允许控制由精确地系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>