vue基础一

VUE.JS

1. 是目前最火的一个前端框架，react是最流行的的一个前端框架
2. 是前端主流框架之一，和Angular.js、React.js并称为前端三大主流框架
3. 是一套构建用户界面的框架，只关注视图层，它不仅易上手，还便于与第三方库或既有的项目整合

vue的基本代码

1. v-clock:解决插值表达式闪烁（

   <style>[v-cloak]{display:none}</style> <p v-clock>{{msg}}</p>

   ）
2. {{ }}：插值表达式，会替换自己的占位符，不会把内容清空（

   <p>{{msg}}</p>

   ）
3. v-text：插入文本，会覆盖原来的内容（

   <p v-text="msg">haha</p>

   ）
4. v-html:会插入文本，编译，也会覆盖原来的内容（

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

   ）

vue的事件修饰符

1. .stop：阻止事件冒泡（

   <div class="div1" @click="on"> 		<input type="button" value="点击" @click.stop="click"/> 	</div>

   ）
2. .prevent：阻止默认事件（

   <a href="https://hao.360.cn/?360safe" @click.prevent="click"></a>

   ）
3. .once：只执行一次（

   <a href="https://hao.360.cn/?360safe" @click.prevent.once="click"></a>

   ）
4. .capture：添加事件侦听器时使用事件捕获模式（

   <div class="div1" @clic.capture="on"> 		<input type="button" value="点击" @click="click"/> 	</div>

   ）
5. .self：实现只有点击当前元素时，才会触发事件处理函数（

   <div class="div1" @clic.self="on"> 		<input type="button" value="点击" @click="click"/> 	</div>

   ）
6. .stop与.self的区别：.self只阻止自己事件冒泡