Vue 第一天学习 ---2018.06.28
1.引包
2.学会控制元素、显示数据，基本框架建立
<title>Document</title>
<script src="./lib/vue.min.js"> </script>
</head>
<body>
<div id="app">
</div>
<script>
//创建vue 实例，
var vm = new Vue({
el : '#app',
data : {
},
methods : {
}
});
</script>
</body>
3.相关的指令，
v-cloak 解决插值表达式的闪烁问题，
v-text
v-html 解析为html
v-bind 是Vue 中用于绑定属性的指令， v-bind中 可以写表达式，
v-on 绑定各类事件
4.总结
4.1 定义一个基本的Vue代码结构
4.2 插值表达式和 v-cloak v-text v-html
v-bind绑定变量 缩写是 :
v-on绑定事件 缩写是 @
4.3 setInterval ()函数使用 clearInterval() 函数使用
2018.06.29
1.事件修饰符
----关于冒泡机制，
<div class="inner" @click="divclick">
<input type="button" value="搓我" @click="btnclick"/>
</div>
就是我在点击 btnclick 函数的时候，附带性的也把外层的divclick函数给出发了，
但是先触发btnclick函数，再触发divclick 函数，这样不是很好，
<!-- 使用.stop 阻止冒泡机制的发生-->
可以使用.stop 阻止，<input type="button" value="搓我" @click.stop="btnclick"/>
<!-- 使用.pervent 阻止默认事件的发生-->
<a href="http://www.baidu.com" @click.prevent="linkclick">百度一下</a>
<!-- 使用.capture 实现事件的捕获机制-->
<div class="inner" @click.capture="divclick">
<!--默认使用冒泡，现在使用捕获机制-->
<input type="button" value="搓我" @click="btnclick"/>
<br>
</div>
<!--不允许使用冒泡，只有self 自己点击的时候触发-->
<div class="inner" @click.self="divclick">
关于stop 和self 是存在区别的：self 只是保护自己不被触发，但是stop 阻止所有。
2.v-model 实现双向数据的绑定，
v-bind 只能实现数据的单向绑定，从 m--->>到v 中，
现在则是v-model 登场，
<input type="text" v-bind:value="msg" style="width:100%;">
<input type="text" v-model="msg" style="width:100%;">
v-model 指令可以实现 表单元素和Model 中数据的双向绑定，但是只能运用于表单元素中，
3. vue 中使用class样式样式，class，
<!--练习使用vue 控制CSS 的样式-->
<!--第一种，使用默认的形式，-->
<h1 class="red thin">这个只是一个测试实例1</h1>
<!--第二种形式,数组的形式-->
<h1 :class="['red','thin']">这个只是一个测试实例2</h1>
<!--第三种形式，使用三元表达式-->
<h1 :class="['red','thin',flag?'active':'']">这个只是一个测试实例3</h1>
<!--第四种形式，使用对象-->
<h1 :class="['red','thin',{active:flag}]">这个只是一个测试实例4</h1>
<!--第五种形式-->
<h1 :class="classObj">这个只是一个测试实例5</h1>
var vm = new Vue({
el : "#content",
data : {
flag : true,
classObj : {'red':true,'active':false}
},
methods : {
}
});
4. vue 控制style 样式
<!--使用Vue 控制 style 样式-->
<h1 :style="{'color':'red','font-weight': 200}">这个是一个h1,测试1</h1>
<!--第二种，移到data 上定义，-->
<h1 :style="styleObj">这个是一个h1,测试2</h1>
<!--第三种，移到data 上定义多个对象，-->
<h1 :style="[styleObj,styleObj2]">这个是一个h1,测试3</h1>
5.v-for 的使用，有五种形式，
<p v-for="item in list">{{item}}</p> 普通数组
<p v-for="(item,i) in list">{{item}}---{{i}}</p> 展示形式不一样
<p v-for="user in list2">{{user.id}}---{{user.name}}</p> 对象数组
<p v-for="(val,key) in list3">{{val}}---{{key}}</p> 对象--键值对
<p v-for="count in 20">{{count}}</p> 普通数字形式
这五个形式
6.v-for 使用的注意事项，就是保障数据的唯一性
7.v-if v- show
<h3 v-if="flag">这个是使用v-if控制的元素</h3> v-if 是删除dom操作，
<h3 v-show="flag">这个是使用v-show控制的元素</h3> v-show 是进行元素的display : none属性。
v-if 对性能消耗较高，因此频发的切换则不使用这个，
v-show 有较高的出事渲染消耗，
第一天学习总结：
1.学习了mvc 和mvvm 的区别，mvc 是整个项目，mvvm 是前端架构，vm提供数据d绑定，
2.学习了vue 中基本的代码结构，引包，el,data ,methods ,
3.学习了相关的基本指令，
插值表达式，{{msg}} {{中间是变量名}}
v-cloak v-text v-bind(:) v-on(@) v-model v- for ,v-if v-show ,事件修饰符，
4.事件修饰符，，.stop .prevent .capture .once .self
5.el 选择控制的区域，data 是个对象，指定控制区域的用到的数据，methods 也是对象，自定义方法，
6.在vm 实例中，要使用data 中的数据，和methods 中的方法，使用this
7. v-for 要会使用 key 属性，
8.v- model 只能应用于表单元素，实现数据的双向绑定
9.vue 中绑定样式的两种方式，，v-bind :class v-bind:style ,其中数据可以是数组，也可以是类，