vue学习（一）

学习vue（一）-------------简单了解

1.导包

vue开发的第一步：导入vue.min.js文件

2.vue构造器

new Vue({ })
注意一点：Vue首字母必须大写。
其中参数包括：el 参数，它是 DOM 元素中的 id。data 用于定义属性。methods 用于定义的函数，可以通过 return 来返回函数值。
构造器中的属性课通过{{}}插值，{{ }} 用于输出对象属性和函数返回值。

eg：

<div id="app">
	<h1>site : {{text}}</h1>
	<h1>{{getmessage()}}</h1>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			text: "例子",
		},
		methods: {
			getmessage: function() {
				return  this.text;
			}
		}
	})
</script>

注意：当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

3.for属性

这是html的一个属性

<label for="r1">修改颜色</label><input type="checkbox" id="r1">

在label中的使用for属性，而在input中使用ID来实现类似于绑定的效果，（不能input中使用for，label中使用id）这样，不论是点击“修改颜色”还是多选框都可以实现选定。

4.v-bind绑定属性

格式为: <div v-bind:class="{'class1': boolean值}">
v-bind:class 指令 </div>

5.v-model双向绑定

<input v-model="message">

 data: {
message: 'Runoob!'}

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

6.表达式

 {{5+5}}<br>
{{ boolean值 ? 'YES' : 'NO' }}<br>

不需细讲。

7.v-if指令

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

8.v-on指令

<a v-on:click="doSomething">

methods：{
	dosomething:function(){}
}

v-on 指令包括click，submit，keyup，enter等

9.过滤器

<div id="app"> {{ message | capitalize }}</div>

new Vue({
	el: '#app',
	data: {
		message: 'runoob'
	},
	filters: {
		capitalize: function (value) {
			if (!value) return ''value = value.toString()
			return value.charAt(0).toUpperCase() + value.slice(1)
		}
	}
})

注意：
过滤器可以串联：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA(‘arg1’, arg2) }},这里特别注意一下：message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

10.缩写

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
	<!-- 完整语法 -->
	<a v-bind:href="url"></a>
	<!-- 缩写 -->
	<a :href="url"></a>
v-on 缩写
	<!-- 完整语法 -->
	<a v-on:click="doSomething"></a>
	<!-- 缩写 -->
	<a @click="doSomething"></a>

11.v-for循环

<div id="app">
<ol>
<li v-for="site in sites">
  {{ site.name }}
</li>
</ol>
</div>

new Vue({
	el: '#app',
	data: {
		sites: [
  			{ name: 'Runoob' },
  			{ name: 'Google' },
  			{ name: 'Taobao' }
  		]
  	}
})

原来还以为sites是规定好要这么写的，其实这个名字可以随便起，保证site！=sites就OK。

12.v-for迭代对象

<div id="app">
<ul>
<li v-for="value in object">
	{{ value }}
</li>
</ul>
</div>

new Vue({
el: '#app',
    data: {
    	object: {
      		name: 'aaaa',
      		url: 'bbbb',
      		slogan: 'cccc'
    	}
 	}
 })

不用具体写object中的属性，直接把一个个属性作为对象来访问

13.v-for多个参数

<ul>
<li v-for="(value, key, index) in object">
 {{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		object: {
    		name: 'aaaa',
    		url: 'bbbb',
    		slogan: 'cccc'
		}
	}
})

三个参数时，第一个是值value，第二个是键key，第三个是序列index。
两个参数时，第一个是值value，第二个是键key，第三个是序列index。

14.v-for循环小数

<div id="app">
<ul>
<li v-for="n in 10">
 {{ n }}
</li>
</ul>
</div>

new Vue({
	el: '#app'
})

必须要构造一个vue实例，并且在vue中写。