Vue基本语法 （一）

一、前言

我上篇博客和大家分享了Vue的入门学习，这次给大家分享Vue的基本语法，希望能够帮助到大家。

二、插值

1、html字符串的渲染

就是使用v-html指令用于输出html代码
例：

<div id="app">
	<div v-html="html"></div>
</div>
<script type="text/javascript">
		var vm=new Vue({
			el:'#app',//规范Vue的作用范围
			data:function(){
				return{s
					html:'<input type="text" value=0 />',
				}
			}
</script>

2、属性绑定指令

HTML属性中的值应使用v-bind指令

例：

<div id="app">
	<a v-bind:href="href">新浪</a>
	<input type="button" value="点击" v-on:click="onClick"></input>
</div>

	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',//规范Vue的作用范围
			data:function(){
				return{
					href:'http://www.sina.com',
				}
			},
			methods:{
				onClick:function(){
					alert(11111);
				}
			},
		});
	</script>

3、表达式

Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}

• 我的Id是js动态生成的
• 
  例：

  <div id="app">
  	{{str.substr(0,6).toUpperCase()}}
  	{{number+1}}
  	{{ok ? 'YES' : 'NO'}}
  	<!-- 动态赋ID -->
  	<li v-bind:id="'list-' + id">dfadgrgda</li>
  </div>
  
  
  <script type="text/javascript">
  		var vm=new Vue({
  			el:'#app',//规范Vue的作用范围
  			data:function(){
  				return{
  					str:'hello vue',
  					number:10,
  					ok:true,
  					id:13,
  				}
  			},
  		});
  </script>
  

  三、指令

  指的是带有“v-”前缀的特殊属性
  核心指令
  (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

        v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
          他们只能是兄弟元素
          v-else-if上一个兄弟元素必须是v-if
          v-else上一个兄弟元素必须是v-if或者是v-else-if
  
        v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
  
        v-for：类似JS的遍历，
               遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
               遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
  
        v-bind
        v-on
        v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
          v-for/v-model一起绑定[多选]复选框和单选框  
   例：
  

  <div id="app">
  			<li>1 v-if|v-else|v-else-if分支语句</li>
  			<ul>
  				<div v-if="sex=='boy'">
  					aaa
  				</div>
  				<div v-else-if="sex=='bo'">
  					bbbb
  				</div>
  				<div v-else>
  					ccc
  				<div>
  			</ul>
  			<!-- 区别  v-if : 控制标签是否打印
  					   v-show: 控制标签的样式
  			 -->
  			<li>v-show指令</li>
  			<input type="checkbox" v-model="show" />老王可以出来了
  			<div v-show="show">
  				总是安全了
  			</div>
  			
  			
  			<li>v-for</li>
  			<div v-for="st in students">
  				{{st.id}}
  			</div>
  </div>
  
  <script>
  		var vm=new Vue({
  			el:'#app',//规范Vue的作用范围
  			data:function(){
  				return{
  					show:false,
  					students:[
  						{'id':'1','name':'zs','score':94},
  						{'id':'2','name':'ls','score':96},
  						{'id':'3','name':'ww','score':65},
  						{'id':'4','name':'zl','score':77}
  					],
  				}
  			},
  		});
  		
  	</script>
  

  四、属性

  1、计算属性

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

   computed:{
         xxx:function(){
            
         }
     }
  

  2、监听属性

  监听属性
  监听属性 watch，我们可以通过 watch 来响应数据的变化
  xxx：代表被监听的属性，必须存在

  watch:{
        xxx:function(v){
  
        }
     }
  

  实例：

  <div id="app">
  	<li>计算属性</li>
  	单价：<input v-model="price" />
  	数量：<input v-model="num" />
  	总价：{{total}}
  	<li>监听属性</li>
  	kb:<input type="text" name="" v-model="kb" /><br/>
  	mb:<input type="text" name="" v-model="mb" /><br/>
  </div>
  var vm=new Vue({
  			el:'#app',//规范Vue的作用范围
  			data:function(){
  				return{
  					kb:1024,
  					mb:1,
  					price:16,
  					num:1
  				}
  			},
  			watch:{
  				kb:function(v){
  					var i=10;
  					this.mb=v/1024;
  				},
  				mb:function(v){
  					this.kb=v*1024;
  				}
  			},
  			computed:{
  				total(){
  					return parseInt(this.price)*parseInt(this.num);
  				}
  			}
  		});
  		
  	</script>
  

  五、对应结果图及总结

  
  
  好了这次的内容就和大家分享到这了如果有疑问或者我有些不对的地方欢迎评论区留言，或者可以进我主页参考我上篇博客Vue的入门学习。