vue基础

vue的设计理念MVVM设计理念

基本的指令

• v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少
• v-html: 元素的innerHTML
• v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
• v-else-if
• v-else
• v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换
• v-cloak 当网速慢时防止闪烁，这个指令是用来保持在元素上直到关联实例结束时进行编译。
• v-bind使用
  给元素的属性赋值
  可以给已经存在的属性赋值 input value
  也可以给自定义属性赋值 mydata
  语法 在元素上 v-bind:属性名=“常量||变量名”
  简写形式 :属性名=“变量名”

<div v-bind:原属性名="变量"></div> <!-- 注后面的都是变量 -->
<div :属性名="变量">
</div>
<p :class='classObj'>颜色</p>
<p :class='["red","thin",flag?"active":""]'>颜色</p>
<p :class='["red","thin",{"active":flag}]'>颜色</p>
<p :style='styleObj'>颜色</p>
<p :style='[styleObj,styleObj1]'>颜色</p>
in后可以放对象、数组、数字
如果后面放数字，前面的变量起始值为1
<li v-for='(item,index) in arr'>item是值，index是索引</li>
<li v-for='(item,key,index) in obj'>item是值，key是键，index是索引</li>
<li v-for='count in 10'>次数：{{count}}</li>
new Vue({
	el:'',
	data:{
		flag:true,
		classObj:{
			red:true,thin:false
		},
		styleObj:{color:'red','font-size':'200px'},
		styleObj1:{backgroundColor:'yellow'},
		arr:[],
		obj:{}
	}
})

• v-on的使用
  处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
  普通使用 v-on:事件名=“表达式||函数名”
  简写方式 @事件名=“表达式”
  也可以用来绑定自定义事件
• v-model
  双向数据绑定原理是（Object.defineProperty）
  将页面中的表单控件和后台的data绑定到一起
  改变一个的话两个都变
  和v-bind的区别 v-bind实现的单项的数据绑定
• v-for的使用
  使用v-for时必须绑定一个key可以优化虚拟DOM的渲染
  基本语法 v-for=“item in arr”
  对象的操作 v-for=“item in obj”
  如果是数组没有id
  v-for="(item,index) in arr" :class=“index”
  各中v-for的属性顺序(了解)
  数组 item,index
  对象 value,key,index
  渲染虚拟DOM是使用diff算法
  传统diff算法是这样做的：循环递归每一个节点

new Vue({
	el:'目的地',
	data(){
		return {  // data 必须是一个函数，若不是组件间的data会互相影响，因为地址的原因
			arr:[
				{id:1,name:'张山'},
				{id:2,name:'赵四'}
			]
		}
	},
	template:` // 这里是反引号
		<ul>
			<li v-for='(item,index) in arr' :key='index'>{{item.name}}</li>
		</ul>
	`
})

关于this指向问题
vue现在已经把this指向window或者的事件对象的问题解决了
现在的methods和data本身都是同一个对象中的属性，所以this指向该对象可以通过this获取当前vue对象的属性和方法

局部组件的使用

var Header = {
	 template:'模板' ,
	  data是一个函数,
	  methods:功能,
	  components:子组件们 
	  } // 大意为我创建了一个子组件
new Vue({
	el:'目的地',
	data是一个函数,
	template:``,
	components:{
		Header	// es6写法属性名和属性值一样的简写，将Header组件挂载到当前的vue对象中作为局部组件 
		// 只有挂载了才能使用
	}
})

注册全局组件
使用前不需要挂载，在全局直接使用

Vue.component('组件名','组件内容')；
Vue.component('Header',Header);
var Header = {
	 template:'模板' ,
	  data是一个函数,
	  methods:功能
} // 大意为我创建了一个子组件

注册局部过滤器

 <div id="app">
 </div>
    <script src="vue/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
                <span>{{msg | orgin | orgin}}</span> // aa12	
             `,
            data(){
                return{
                    msg:'12'
                }
            },
            filters:{
                orgin(value){
                    return "a"+value;
                }
            }
        })
       </script>

注册全局组件

<div id="app">
 </div>
    <script src="vue/vue.js"></script>
    <script>
      Vue.filter('sis',(v,a,c) => {
            return '151'+v+a+c;
        })
        new Vue({
            el:'#app',
            template:`
                <span>{{msg | sis("a","b")}}</span> // 12151ab |前面的是第一个参数后面括号里的是第二个和第二个参数
             `,
            data(){
                return{
                    msg:'12'
                }
            },
            filters:{
                orgin(value){
                    return "a"+value;
                }
            }
        })
       </script>

父子组件传值
父给子传值：主要使用prop属性
通过v-bind给子组件绑定属性这个属性名和子组件中的props中内容对应

 <div id="app">
 </div>
    <script src="vue/vue.js"></script>
    <script>
        var Headr = {
          template:`<span>{{a}}aaaaa</span>`,
          props:["a"]
        };
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:'我是之一'
                }
            },
            template: `
                <div>
                    <Headr :a="msg"></Headr> // 我是之一aaaaa
                </div>
            `,
            components:{
                Headr
            }
	)}
	</script>

子给父传

var Headr ={
	template:`<button @click="updata">点我触发事件</button>`,
	data(){
		return{
			zmsg:'我是给父组件的值'
		}
	},
	methods:{
		updata(){
			this.$emit('parentele',this.zmsg)
		}
	}
}
new Vue({
	el:'#app',
	data(){
		return{
			msg:''
		}
	},
	template:`
		<div>
			<span>{{msg}}</span>
			<Headr @parentele='append'></Headr>
		</div>
	`,
	methods:{
		append(v){
			this.msg = v
		}
	}
	,
	components:{
		Headr
	}
})

// 注：Headr子组件的this.$emit触发的自定义事件要
// 写在挂子的地方反正要还是要写在自己上才会触发自定义事件来调用父组件上的函数