vue 指令、data命名限制

.vue文件中template内模板语法

1、只能存在单行语句(不能是函数if-else等)
	{{变量}}
	(1)不能解析字符串中的标签
	(2)不能放在标签上

2、v-once指令
	确保标签中的内容只计算一次,然后缓存下来
	(1)只能渲染一次,相当于const
	(2)直接在标签中使用
		<div v-once>
			...
		</div>
		
2.5、v-text指令
	<span v-text="msg"></span>	标签中有内容脚手架环境会报错

3、v-html指令
	(1)解析html标签,scoped的样式不会应用在v-html内部,因为那部分HTML没有被Vue的模板编译器处理
	(2)标签中有内容脚手架环境会报错

4、v-bind特性
	v-bind:属性="值"
	(1)简写:将v-bind直接换成:
	(2)在"值中可通过+内容"或"值+'内容'";拼接字符串
	(3)修饰符
		.camel	将kebab-case attribute名转换为camelCase。

5、v-pre指令
	跳过这个元素和它的子元素的编译过程,即不会去解析变量等,非保留格式的pre标签
	<span v-pre>...</span>

6、v-cloak指令
	这个指令保持在元素上直到关联组件实例结束编译
	当和css一起使用时,可以用来隐藏未编译的Mustache标签直到组件实例准备完毕。
		如:
			[v-cloak] { css中使用
			  display: none;
			}
			
			<div v-cloak>
			  {{ message }}
			</div>
			
7、v-is指令(已废弃)
	解除模板受原生HTML解析规则的约束,类似于动态2.x中 :is的绑定
	如:<ul>、<ol>、<table>和<select>等,对哪些元素可以出现在它们内部有限制,而某些元素(如:<li>、<tr>和<option>只能出现在某些其他元素中。
		
		<table>
		  <tr v-is="'blog-post-row'"></tr>
		</table>

8、v-memoe
	v-memo="[]"在功能上等效于v-once,在依赖项未变化时进行复用
	元素和组件上都可以使用,依赖项未变化时整个该子树的更新会被跳过,即使是虚拟DOM的VNode创建也将被跳过
	<div v-memo="[valueA, valueB]">
	  ...
	</div>
	
	结合v-for使用时,v-memo必须和v-for放在一起,不能放进内部元素
	<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
	  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
	  <p>...more child nodes</p>
	</div>

	


条件渲染:

1、v-if指令
	v-if='xx'
	(1)根据条件销毁或重建

2、v-else指令
	(1)在标签中直接添加v-else
	(2)搭配v-if使用

3、v-else-if指令
	v-else-if='x'
	(1)配合v-if指令使用
	(2)语法和if-else-if相同

4、v-show
	v-show='x'
	(1)当值为真时,显示标签,切换元素的display
	(4)同v-if的区别:
		1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
		2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
		3、相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
		一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
		

列表渲染:

1、v-for
	v-for='x in 数组/对象/Map/Set'
		对象:x为对象的值而非键
	v-for='(value,index) in 数组/对象/Map/Set'
	v-for='(value,key,index) in 数组/对象/Map/Set'
	v-for='value in 数值'	
		value从1开始取值
	
	解构赋值：
		v-for="({ message }, index) in items"
	
	和数组中for of遍历相同：
		v-for="item of items"

	(1)给遍历的标签使用v-bind绑定唯一的key,元素复用
		:key='唯一值'
	(2)v-if的优先级比v-for更高,这意味着v-if将没有权限访问v-for里的变量
		<li v-for="todo in todos" v-if="todo.isComplete">	This will throw an error because property "todo" is not defined on instance
		  {{ todo }}
		</li>
		修正:
		<li v-for="todo in todos">	This will throw an error because property "todo" is not defined on instance
		  <li v-if="todo.isComplete">{{ todo }}</li>
		</li>

data命名限制:
	以 _ 或 $ 开头的属性名不会被组件实例代理(即无响应式),因为它们可能和Vue内置的property、API方法冲突。
	可以使用例如vm.$data._property的方式访问这些 property。

data变成箭头函数:
	如果你为data使用了箭头函数,则this不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
		data: vm => ({ a: vm.myProp })

代码示例：

<template>
  <div class="hello">
      {{"哈哈"}}

      <p v-once>{{msg}}</p>
      {{hello}}

      <div  v-html='hello'></div> 

      <a v-bind:href="url" >{{url_name}}</a>
      <div :class="divClass">容器</div> 
      <p :class="divClass">容器2</p>

      <div v-if="flag">jeff</div>
      <div v-else>mike</div>

      <div v-if="val==='b'">b</div>
      <div v-else-if="val==='a'">a</div>
      <div v-else>c</div>

      <p v-show='flag2'>tom</p>
      <ul>
          <li v-for="name in obj">{{name}}</li>
      </ul>
      <ul>
          <li v-for="(item,index) in obj">{{index}}->{{item}}</li>
      </ul>

        <ul>
          <li v-for="(value,key,index) in obj">{{key}}->{{value}}->{{index}}</li>
      </ul>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  //相当于react中的state
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      hello:"<h3>hello</h3>",
      url_name:"百度",
      url:"http://www.baidu.com",
      divClass:'isActive',
      flag:false,
      val:'a',
      flag2:true,
      names:['jeff','mike','tom'],
      obj:{name:'jeff',name2:'mike2',name3:'tom2'},
      arr:{name:'jeff',age:18,address:where}
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>