Vue基础模板语法

Vue.js 使用了基于 HTML 的模板语法，下面为大家介绍一些基本的模板语法：

插值

1，文本插值：
新建一个Vue 在data里面写的属性，都能通过{{}}来取值。

<div id="uu">
		{{msg}}
</div>
<script type="text/javascript">
		new Vue({
			el: '#uu',
			data() {
				return {
					msg: '666',
				};
			}
		})
	</script>

2，html
在div中加入属性v-html，即可把在data()里的属性以html的标签代码输出。

<div v-html="vueHtml"></div>
<script type="text/javascript">
		new Vue({
			el: '#uu',
			data() {
				return {
					vueHtml: '<span style="color:red">555</span>',
				};
			}
		})
	</script>

3，属性
v-bind 简写：：
v-bind：value就是将值填写到value=""
然后value的值方式改变，并不会影响vue实例中变量值。

<input type="text" :value="msg" />
<script type="text/javascript">
		new Vue({
			el: '#uu',
			data() {
				return {
					msg: '666',
				};
			}
		})
	</script>

4，表达式
在vue中各种表达式也是支持的，和C标签差不多，只不过多了一个{}。
{{str.substr(0,6).toUpperCase()}} //全大写
{{ number + 1 }} //int类型增加
{{ ok ? ‘YES’ : ‘NO’ }} //三元运算符

• 我的Id是js动态生成的
• //在vue中拼接是外面套个" "然后字符串加 ’ ’ 属性则直接加进去。

  指令

  指的是带有“v-”前缀的特殊属性。

  1，条件指令(if else-if else)
  根据其后表达式的bool值进行判断是否渲染该元素
  他们只能是兄弟元素
  v-else-if上一个兄弟元素必须是v-if
  v-else上一个兄弟元素必须是v-if或者是v-else-if
  就和java中的if else是一模一样的，但这里比较简单
  ，在""里面输入判断语句，符合的就会输出div里的内容。

  <div id="uu">
  		<input type="text" v-model="score" />
  		<div v-if="score>90">A</div>
  		<div v-else-if="score>80">B</div>
  		<div v-else-if="score>70">C</div>
  		<div v-else-if="score>60">D</div>
  		<div v-else>E</div>
  </div>
  <script type="text/javascript">
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					score:22,
  				};
  			}
  		});
  </script>
  

  2，V-Show
  与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”。

  <div id="uu">
  		<input type="text" v-model="show" />
  		<div v-show="show>10">chuxian</div>
  </div>
  <script type="text/javascript">
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					score:22,
  					show:null,
  				};
  			}
  		});
  </script>
  

  3，v-for
  类似JS的遍历，
  遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
  遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标。

  <div v-for="item,index in arr">
  		{{item}},{{index}}
  </div>
  <div v-for="item,index in objarr">
  		{{item.name}},{{index}}
  </div>
  <script type="text/javascript">
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					arr:[1,2,3,4],
  					objarr:[{id:1,name:'狗蛋'},{id:2,name:'狗蛋2'}],
  				};
  			}
  		});
  </script>
  

  还有一些基本的，例：v-bind， v-on， v-model。

  动态参数

  从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数。

  <input type="text" v-model="evname" />
  		<!-- 只要是V-on里面的时间都可以更改 -->
  <button v-on:[evname]="xxx">点我</button>
  
  <script type="text/javascript">
  		new Vue({
  
  			el: '#uu',
  			data() {
  				return {
  					evname:'click',
  				};
  			}
  	</script>
  
  

  在输入框中输入任何指令都能生效。

  过滤器

  1，局部过滤器

  <!--第一个是引用对象 中间用 | 隔开 右边则是过滤器的名称 -->
  {{msg|a}}
  
  
  <script type="text/javascript">
  		new Vue({
  
  			el: '#uu',
  			data() {
  				return {
  					msg: 'https://www.baidu.com',
  				};
  			},
  			filters:{
  			// 参数V就是你引用的对象
  				a(v){
  					console.log(v);
  					//可返回值
  					return 'xxx';
  				}
  			}
  		});
  </script>
  
  

  且局部过滤器可以串联，
  用| 隔开，他会先运行a再运行b过滤器。
  {{msg|a|b}}

  2，全局过滤器

  全局过滤器，也就是指，当你这个项目的其他地方也需要这个过滤器的时候，可以把它变成全局，这样整个项目都能使用这个过滤器了。

  	<script type="text/javascript">
  	//第一个是过滤器名称， 第二个则是过滤器作用。v是参数。
  		Vue.filter('c',function(v){
  			return v.substring(4,9);
  		})
  		
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					msg: 'https://www.baidu.com',
  				};
  			}
  		});
  	</script>
  

  计算属性及监听属性

  1，计算属性
  计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

  数量：<input type="text" v-model="num"  />
  单价：<input type="text" v-model="price"  />
  计算总价：{{total}}
  <script type="text/javascript">
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					num:3,
  					price:12,
  				};
  			},
  			computed:{
  				//在计算机属性定义的时候,是可以获取到vue实例中定义任何变量
  				total(){
  					return parseInt(this.num)*parseInt(this.price);
  				}
  			}
  		});
  	</script>
  
  

  2，监听属性
  监听属性 watch，我们可以通过 watch 来响应数据的变化。
  例：简单的单位换算。
  这里要注意的是 v-model里的值和data()还有watch()中的值，都要保持一致，要不然不出效果，

  	KM：<input type="text" v-model="km"  />
  	M：<input type="text" v-model="m"  />
  <script type="text/javascript">
  		new Vue({
  			el: '#uu',
  			data() {
  				return {
  					km:1,
  					m:1000,
  				};
  			},
  			watch:{
  			// v 也就是监听对象
  				km(v){
  					this.m= v*1000;
  				},
  				m(v){
  					this.km=v/1000;
  				}
  			}
  		});
  	</script>