持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言

美好的一天从写代码开始，今天继续整理vue起步知识点。

1.VUE 数据驱动视图

今天整理的分为 MVC 与MVVN 下面将会以图片的形式展现出来

2.指令系统(以 V-XXX开头)

• v-text → innerText

• v-html → innerHtml

• v-if → 数据属性对应的值 如果为假 则不在页面渲染，反之亦然

• v-show → 控制dom元素的显示隐藏 display：none/block;

• v-bind → 绑定标签上的属性（内置的属性和自定义的属性）：bind

• v-on → 原生事件名=‘函数名’ 简便写法：@

• v-for = ‘(item,index) in menuLists’ `

                  new Vue({
    		el:'#app',
    		data:function(){
    			return{
    				msg:'指令系统',
    				msg2:'<h2>指令系统</h2>',
    				isShow:false,
    				isGreen:false,
    				text:'哈哈哈',
    				menuLists:[
    					{id:1,name:"大腰子",price:50},
    					{id:2,name:"排骨",price:60},
    					{id:3,name:'肘子',price:830},
    				],
    				people:{
    					name:'寇世龙',
    					age:21,
    					fav:'AV'
    				}
    			}
    		},
    		
    		template:`
    		<div class='app'>
             <h2>{{msg}} </h2>
             <p v-text='msg'> </p>
    		 <div v-html='msg2'></div>
    		 <div v-text='1+1'></div>
    		 <div v-if='isShow'>我想你也是爱我的</div>
    		 <div v-if='!isShow'>你也舍不得</div>
    		 <div v-if='Math.random()>0.5'>
    		 已显示
    		 </div>
    		 <div v-else>
    		 已隐藏
    		 </div>
    		 <div v-show='isShow'>显示 </div>
    		 <div v-show='!isShow'>隐藏 </div>
    		 <div class='box' :class='{active:isGreen}' :a='text' v-on:click='clickHeadler'>  </div>
    		 <ul>
    		  <li v-for='item in menuLists'>
    		   <h5 v-text='item.id'></h5>
    		   <h3>{{item.name}}</h3>
    		   <em>{{item.price}}</em>
    		  </li>
    		 </ul>
    		 
    		 <ul>
    		 <li v-for='(value,key) in people'>
    		  {{key}}==={{value}}
    		 </li>
    		 </ul>
            </div>`,
    		methods:{
    			clickHeadler(e){
    				// this.isGreen=!this.isGreen
    				if(this.isGreen =true){
    					this.isGreen =false
    				}else{
    					this.isGreen=true	
    				}
    			}
    		}
    	})`
  

3.双向数据绑定 (v-model)

• 双向数据绑定的体现 只体现在UI控件中 只能体现在UI控件中 只能应用在有value属性的
  • 语法糖

4.全局-局部组件

全局组件的创建：第一个参数是组件的名字,第一个参数是options

`

     Vue.component('Vbtn',{
			template:`
			 <button>按钮<button>
			`
		});
  var vm =new Vue({
			el:"#app",
			data(){
				return{
					
				}
			},
			//用子
			template:`
			<div>
			<Vbtn/>
			</div>
			`
		});

`

局部组建的使用： 打油诗: 声子 挂子 用子

`

		 var Vheader ={
			 template:`
			  <div> 我是头部组件</div>
			 `
		 };
		 var App={
			 data(){
				 return{
					 
				 }
			 },
			 methods:{
				 clickHanlder(){
					 console.log(this);
				 }
			 },
			 template:`
			 <div>
			 <button @click='clickHanlder'></button>
			 我是入口组件
			 </div>
			 `
		 };
		 console.log(this)
		var vm =new Vue({
			el:"#app",
			data(){
				return{
					
				}
			},
			//挂子
			components:{
				App,
				Vheader
			},
			//用子
			template:`
			<div>
			<Vheader></Vheader>
			<App></App>
			</div>
			`
		});

`