vue2入门

1.MVC view页面
Model只负责数据库
controller(处理请求,后端)
view视图层->服务器
2.MVVM M表示需要处理数据的一部分,V表示页面 ,MV整体的控制v和m
3. 优点
1.可以完全替代过去操作dom对象,jq ajax,
2.可以更加关注业务逻辑
3.直接渲染数据到页面
4.版本 vue1,2的区别,2经常用,老项目用1
语法区别很大 版本3处于测试阶段
5. 使用赋值数据//el也可以是"el"

<p id="mydata">{{str1}}</p>
var vm=new Vue({

   			"el":"#mydata",
   			"data":{
   				"str1":"aaa"
   			},
   });

6.v-cloak 解决了上面插值表达式会闪烁问题,网速卡时，html认为他是文本然后消失

<style>
 [ v-cloak]{
   display:none;
}
</style>
<p id="mydata" v-cloak>{{str1}}</p>

7.v-text v-html的使用:会直接清空内容后添加数据 插值表达式可以和之前的值结合
它们不会闪烁

 <p v-html="str1"></p>//如上vue

8.el最好是父类元素

9.v-bind 可以绑定属性的属性
1.可以直接:代替!
2.可以在里面拼接

 <input v-bind:value="str1"></input>//如上vue
    //代替里面属性的值,str1是vue的数据
    <p v-bind:title="str1"></p>//如上vue
    <p  :title="str1 +'hello' "></p>//如上vue

10.v-on事件,多个方法用,分割 @是简写

 <button @click="func2">xxx</button>
       <button v-on:click="func2">xxx</button>

var vm=new Vue({
		el:"#mydata",
		data:{
			"str1":"aaa",
			"str2":"bbb",
			"str3":"<font style='color:red;'>xxx</font>",
			"str4":"xxxx"
		},
		methods:{
			func1(){
				alert("aa")
			},
			func2(){
				alert("bb")
			}
		}
	});

11.事件修饰符
1.阻止冒泡.stop(点击了内层元素同时外层也会触发)
使用方法:<button @click.stop="func2">xxx</button>
2.阻止超链接默认行为b.prevent

 以前<a href="javascript:void(0)" ></a>
      <a href="https:www.baidu.com" @click.prevent="func2">不会跳转</a>

     3.父亲优先触发后子类事件触发 (写在父亲身上父亲捕获)
     4.阻止自身冒泡 .self   只有父类只能看到.stop效果，有父类和子类就触发子类和父类

 <div id="mydata" @click="func1" style="width:100px;height:200px;background:red">
          
      	 <div @click.self="func2" style="width:100px;height:100px;background:blue;">
      	 	
				<p @click="func3">xxxxx</p>	

      	 </div>
      </div>

    5.   once只触发一次事件处理函数
    6.使用多个修饰符 @click.prevent.once 对于超链接只有一次阻止 其他的.stop一直有效而且只对里面的函数名有效

12.v-model 双向数据绑定 就是 M模型(数据) V视图数据都改变
1.单向数据绑定M->V v-bind
2.大多数需求发生在表单中

 <p>{{str5}}</p>
  	 	<input type="text" v-model="str5">

13. select的value可以直接取option的value

 <select name="" v-model:value="csign">
     	 <option value="+">+</option>
     	 <option value="-">-</option>
     	 <option value="*">*</option>
     	 <option value="/">/</option>
    </select>

14.vue里面传入数据都是json格式
15.js用parseInt来转换字符为int类型
16.Vue内部不同参数用逗号隔开

var vm =new Vue({
	el:"",
	data:{a:"11",b:"22"},
                methods:{
                         func(){
	}

}				
							
});

17.vue方法改自己模型的参数用this

var vm =new Vue({
	el:"",
	data:{a:"11",b:"22"},
                methods:{
                         func(){
	             this.a=11;
	}

}
});

18.使用vue控制样式(补充而已)
第一种 <p :class="['style1',flag?'style2':' ']"></p>//根据vue里面的数据判断数据是否生效
第二种(常用) <p :class="['style1',{'style4':flag}]"></p> 用json代替三目运算符更加方便 第三种 注意- 的单词 一定要加到这个’'里面

<p :style ="mystyle"></p> 	
var vm =new Vue({
	el:"",
	data:{
	mystyle:{color:'red','font-size':'30px'};
},
               
}
});

第四种(推荐) 在标签中使用hstyle名字,hstyle定义中用json数组可以同时使用多个类名

 <h3 :class="hstyle">学生信息管理系统</h3>
.headText{
	text-align: center;
}
.hColor{
	color: red;
}

var Vue=new Vue({
        el:"#app",
        data:{
           sList:[
           {id:"1",name:"aa",gender:"male",age:"66"},
           {id:"2",name:"a11",gender:"male",age:"66"},
           {id:"4",name:"as11",gender:"male",age:"66"},
           {id:"5",name:"asa11",gender:"male",age:"66"},
           ],
           hstyle:{headText:true,hColor:true}
          
        },
        methods:{
        	del(){
        		
        	}

        }


      });