VUE：数据驱动模板v-text会覆盖元素中原本的内容，但插值表达式只会替换自己占的这个位置，而不会清空原元素内容
/**
** msg1: 123
** msg2: '<h1>+++h1+++</h1>'
*/
<p>{
{msg1}}</p>
<h4 v-text="msg1">====</h4>
<div>{
{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">hhhaaa__</div>
上面代码实际会被解析为：
<p>123</p>
<h4>123</h4>
<div>'<h1>+++h1+++</h1>'</div>
<div>'<h1>+++h1+++</h1>'</div>
<div><h1>+++h1+++</h1></div>
效果
- 实现字符串滚动效果，可拿到字符串之后，调用
substring进行字符串的截取操作，把第一个字符截取放在最后一个位置即可。并把该步骤置于定时器中。
scrollFunc(){
//intervalId: 定时器idif(this.intervalId != null) return;this.intervalId = setInterval(())=>{
var st = this.msg.substring(0,1)var ed = this.msg.substring(1)this.msg = ed + st;}, 400);// 注意： VM实例，会监听 data 中所有数据的改变，数据一但发生变化会自动更新并同步到页面中去
}
stopScroll(){
clearInterval(this.intervalId)this.intervalId = null
}
- 事件修饰符
.stop阻止事件冒泡
<!--会只执行inputHandler事件-->
<div @click="divHandler"><input type="button" value="点击" @click.stop="btnHandler" />
</div>
.prevent阻止默认行为
<!--点击之后不会进行跳转-->
<a href="http://www.baidu.com" @click.prevent="linkClick">有事找度娘</a>
.capture实现捕获触发机制的事件
<!--先执行divHandler；这也是该div捕获的顺序-->
<div @click.capture="divHandler"><input type="button" value="点击" @click="btnHandler">
</div>
.self只有当事件在该元素本身（比如不是子元素）触发时触发回调.once事件只触发一次
<!--只有第一次点击不会跳转--><a href="http://www.baidu.com" @click.prevent.once="linkClick">有事找度娘</a>
.self与.stop的区别：.self只会阻止自己身上冒泡行为的触发，不会真的阻止冒泡；.stop是真正的阻止了冒泡行为
v-model与v-bind：v-bind只能实现数据的单向绑定，即从M到V；v-model可以实现数据的双向绑定，但只能用于表单元素中【input(radio, text, address, email…), select, checkbox, textarea】
<h4>{
{ msg }}</h4>
<input type="text" style="width:100%;" v-model="msg">
-
v-for的key属性 （只接受string / number） -
使用ui组件定义空数据时：
<fui-tableref="table"v-show="aaa && bbb":show-header="false"<!--不显示表头-->
>
//----------定义空数据--------------------------------<template slot="empty"><div><img src="..." width="..." height="..." /></div><p>暂无数据</p></template>
//-----------------------------------------------------<fui-table-column><template>...</template></fui-table-column>
</fui-table>
vue-router同一个页面地址栏参数改变页面却不刷新？？
因为vue-router同一个页面地址栏参数改变不会触发vue的created或mounted钩子，所以数据不会重新渲染。
解决方案：给vue-router添加一个唯一的key以保证路由切换时会重新渲染触发钩子
<template><div id="app"><router-view :key="key"/></div>
</template>
<script> export default{
name:"App",computed:{
key(){
return this.$route.name? this.$route.name+ +new Date():this.$route+ + new Date();}} } </script>
router.beforeEach((to,from,next)=>{} );：该函数遇到next()才会停止调用该函数，否则会一直调用beforeEach;- 由于使用
vuex需要将store实例挂载到vue实例中，因此vue实例可以对vuex的state数据进行监听，同vue实例data进行双向绑定。而全局变量由于未被“数据劫持”，因此即使全局变量的值发生改变，也无法在vue实例中监听到其变化。 vuex中的状态值不能通过赋值（state.xx=yy）改变，需要通过mutation触发改变，这样方便状态管理。（而一般的全局变量是允许直接赋值的）