今天开始啃VUE（一）

今天开始啃VUE（一）

刚开始学，边看边博，
为了能直白的学习新的概念，我尽量把自己的理解转化成白话
可能都是渣渣，也可能理解不到位，语句有不少问题
……等学到后期回头再重新笔记一次

1、VUE示例

vue使用格式采用数据双向绑定的方式来同步页面
html中用{{}}或指令等方式指定数据的位置，vue中实例化一个对象，然后绑定元素，然后提供数据，最后页面就能输出数据了
vue里的结构，类似对象实例，先vue实例化，然后里面有各种对象，不同的操作指令与数据分放在不同的对象中，比如数据对象都在data里，事件对象在methods里，计算属性在computed里…等等

 <!-- 1-html中添加数据绑定 -->
 <div id="new1">
	<p>{{name}}</p>
</div>

//2-vue中new一个Vue实例
var new1 = new Vue(){
	//3-el中用css操作符绑定数据对象，一般绑定父元素即可
	el:'#new1',
	//4-data数据属性中添加数据对象，对象名称与绑定的名称一致即可
	data:{
		name:'我将直接展示在页面中'
		}
}

输出结果：

 我将直接展示在页面中

2、VUE数据双向绑定的三种方法

vue一般数据绑定的三种方法
（1）{{name}} 双花括号
用于直接页面内容的输出，括号内的name对象在vue实例中的data对象里添加，该对象值会直接输出到html的DOM中

<div id="new2">
	<p>{{name}}</p>
</div>

var new2 = new Vue(){
	el:'#new2',
	data:{
		name:'我将直接展示在页面中'
		}
}

（2）v-bind指令，元素属性数据绑定
可与标签元素的属性数据绑定
（3）v-model指令，元素数据绑定

3、v-bind指令，属性数据

可与标签元素的属性数据绑定，以v-bind引入标签内，对应的数据对象值即为指定属性的值

<div id="new3">
	<a v-bind:href='url'></a>
</div>

var new3 = new Vue(){
	el:'#new3',
	data:{
		url:'http://baidu.com'
		}
}

4、v-if指令，条件控制

该指令在表达式结果返回truthy时渲染

<div id="new4">
    <!-- v-if/else/else if控制流指令 -->
    <!-- if为truthy时该标签显示 -->
    <div v-if='role == "admin"'>
        管理员你好
    </div>
    <!-- v-else-if时候可以传其他值 -->
    <div v-else-if='其他值'>
        另外的情况
    </div>
    <!-- v-else时是if不成立时候显示,此时else不用传参 -->
    <div v-else>
        您没有权限
    </div>
</div>

var new4 = new Vue({
    el:'#new4',
    data:{
        role:null,
    }
})

5、v-on指令，事件指令

可用于事件控制，v-on后面跟事件名，然后指定事件对象，vue里事件对象都存在methods对象属性中

<div id="new5">
    <!-- v-on可以绑定事件，后面跟上事件名，多个事件须用'{事件内容：事件名，内容：名字}'格式 -->
    <!-- 缩写可以@click == v-on:click -->
    <button v-on:click='onClick' v-on:'{mouseenter:onEnter,mouseout:onOut'>点我</button>
</div>

var new5 = new Vue({
    el:'#new5', //一个元素可以绑定多个事件
    methods:{ //on事件定义在methods里面，不放data
        onClick:function(){
            //函数体
        },
        onEnter:function(){
            //函数体
        },
        onOut:function(){
            //函数体
        },
    }
})

6、v-model指令，数据绑定

该指令一般用于表单元素，特别是需要交互的元素，如input/textarea/select标签，表单数据产生变化时应用，数据类型对象存在data对象属性中。

<div id='new6'>
	<input type='text' v-model='name': />
	{{name}}
</div>

var new6 = new Vue(){
	el:'#new6',
	data:{
		name:'请在输入框中输入内容'
		}
}

7、修饰符，指令修饰

看成指令的附加属性，对数据有一定的操作，例如数据取整、数据格式转为number类型等，使用方法在指令后跟’.修饰符名’即可

 <div id="new7">
            <!-- 例如： 
            	.lazy惰性属性，操作失焦时再渲染绑定
                .trim属性，去除输入值前后的空格,
                .number属性，可把输入的数字转换成number类型
            -->
            <input type="text" v-model.number='idNumber' />
            {{name}}>
</div>