VUE初识（vue基本代码，基本指令）
终于还是逃不过学vue，那么就愉快开始吧！
1.什么是Vue.js?ue.js?
Vue.js 是目前最火的一个前端框架,react是目前最流行的一个框架，均可与用于开发手机app。
Vue 是前端的主流框架之一，和angular.js和react.js一起，并称为前端三大框架。
前端的主要工作：主要负责MVC中V这一层，主要工作是和界面打交道，来制作前端页面。
2.为什么要学习前端框架，以及框架和库的区别？
为了提高效率(减少不必要的dom操作，增加渲染的效率)，通过框架提供的指令，前端程序员只需要关心数据的业务逻辑，不在区关心dom的渲染。 核心概念：让用户不再去操作dom，解放双手。
框架：是一套完整的技术解决方案，对项目的侵入性比较大，项目如果开发到后期，重新改变项目，需要重构项目。 例如： node中的express框架；
库：(插件) 提供一个小功能，对项目的侵入性小，如果某个库无法完成某些需求，则可以调用其他库。（jquery库）
3.node中的M(model)V(view)C(业务逻辑)和前端中的MVM区别
：：：MVC是后端的分层开发概念
app.js --> router --> controller --> model
view: 当用户操作了界面，如果要进行业务的处理，都会通过网络请求区请求后端的服务器，
此时我们的请求就会被后端的app.js监听到。
：：：MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V，和VM，其中VM，是MVVM的思想的核心。
M(保存每个页面中单独的数据)
VM(是一个调度者，分隔了M和V)
V(页面中的HTML结构)
数据的双向绑定：
VM 从 v层获取数据保存到VM自身，然后M层从VM调取数据存进自身。
4.vue的基本代码和解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div class="app">
</div>
</body>
<script>
var vm = new Vue({
el:".app",
data:{
},
methods:{
}
})
</script>
</html>
解析：第一步首先引入vue，创建我们vue实例要控制的区域，即上述代码中的class名为app的div，之后创建vue实例。
其中vue实例中会有几个方法：
1.el
要控制的区域 按css的方法拿到该div
2.data
要传递进去的数据
3.methods
实例上要定义的方法
5.三个指令（v-cloak,v-text,v-html）
v-cloak: 依托服务器渲染页面 会先出现{{msg}} -- > data数据 解决闪烁问题
v-text: 类似于插值表达式 渲染数据
v-text 和 {} 区别：
1.v-text 没有闪烁问题
2.<p v-cloak>++++++{{msg}}</p>
<h2 v-text = "msg">+++++</h2>
v-text 会覆盖元素中原本的内容，但是插值表达式只会替换当前的占位符，不会
把整个元素的内容清空。
3. <p v-cloak>{{msg2}}</p>
<h2 v-text = "msg2"></h2>
v-text 和 {{}} 的方式都是吧标签h1当作普通文本渲染到页面上。
4.v-html 可以将h1渲染为html骨架元素(也会覆盖原有元素的value)
<h2 v-html = "msg2"></h2>
6.v-bind指令绑定属性
<button v-bind:title="mytitle">按钮</button>
7.v-on指令绑定事件
<input type="button" value="按钮" v-on:click = "show">
一个简单的vue文字跑马灯效果的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导入vue包 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.创建可控制的区域 -->
<div class="app">
<p>{{ msg }}</p>
<input type="button" value="动起来" v-on:click="active">
<input type="button" value="停止" v-on:click = "stop">
</div>
</body>
<script>
//注意在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据
//属性名,或者this.方法名,来进行访问.
var vm = new Vue({
el:".app",
data:{
msg:"今天天气很好,但是下雨了~~~~",
intervalId:null,
},
methods:{
active:function(){
// console.log(this.msg);
//获取头的第一个字符
//外部的this指向vm实例
//判断定时器是否开启了多次
if(this.intervalId != null){
return;
}else{
this.intervalId = setInterval(()=>{
//访问的是data上的intervalID要加this
var start = this.msg.substring(0,1);
//获取后面的所有字符
var end = this.msg.substring(1);
//重新凭借当前的字符串,并且赋值给 this.msg
this.msg = end + start;
},500)
}
//ES6 箭头函数把this指向外部
//vm会监听自己身上data数据的改变,只要数据一发生变化就会自动把新数据从data
//同步到页面中去
},
stop:function(){
clearInterval(this.intervalId);
this.intervalId = null;
}
},
})
/*
*分析：1.给动起来绑定一个点击事件 v-on
2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg，进行截取操作.
3.把第一个字符截取出来放在最后一个位置.
4.实现点击一下按钮自动截取的功能,需要把2步走中代码放进定时器.
*/
</script>
</html>
8. v-on缩写和事件修饰符
### .stop阻止冒泡
<div class="app">
<div class="inner" v-on:click = "divhandler">
<input type="button" value="点我" v-on:click = "btnhandler">
<!-- 造成了事件冒泡:防止冒泡的时间修饰符 .stop -->
</div>
<input type="button" value="点我" v-on:click.stop = "btnhandler">
### .prevent阻止默认行为
<a href="http://www.baidu.com" @click.prevent="aclick">有问题,先去百度</a>
### .capture 事件捕获机制
<div class="inner" v-on:click.capture = "divhandler">
<input type="button" value="点我" v-on:click = "btnhandler">
</div>
触发的是捕获机制
### .self 只有点击我自己才触发我身上的事件 不会被冒泡到我身上
<div class="inner" v-on:click.self = "divhandler">
<input type="button" value="点我" v-on:click= "btnhandler">
</div>
防止了冒泡事件触发我身上的不相执行的事件
### .once 只执行一次
<input type="button" value="点我" v-on:click.once= "btnhandler">
只触发一次事件处理函数
##### .stop阻止了所有冒泡 .self只阻止(调用.self方法)的冒泡
9.指令v-model 和 双向数据绑定
在console控制台修改msg会直接同步到页面上去,(不用刷新)
<input type="text" v-bind:value="msg">
<!-- v-bind只能实现数据䣌单向绑定,从M绑定到V,无法实现数据的双向绑定 -->
v-model指令可以实现表单元素和model中数据双向数据绑定
(v-model只能用于表单元素中去)
案例：简易计算器的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model='n1'>
<select name="" id="" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model='n2'>
<input type="button" value="=" @click = "calc">
<input type="text" v-model="result">
</div>
</body>
<script>
var vm = new Vue({
el:".app",
data:{
n1:"0",
n2:"0",
result:"0",
opt:'+'
},
methods:{ //计算器算数的方法
//逻辑,判断操作符
calc:function(){
switch(this.opt){
case "+":
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case "-":
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case "*":
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case "/":
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
})
</script>
</html>
10.在网页中使用样式
原本的样式绑定的方式:
<h1 class="red thin italic">欢迎来到vue.js,learning makes me 哈皮!</h1>
vue中样式的绑定方式:
第一种方式:直接传递一个数组,class需要v-bind绑定 v-bind: 添加属性
1.["类名"] eg:["red thin"]
eg: <h1 v-bind:class="['red','italic','thin']">欢迎来到vue.js!</h1>
第二种方式: 在数组中使用三元表达式
2.data中加入开关flag,数组中使用三元表达式进行判断
eg: <h1 v-bind:class="['italic','thin',flag ? 'red':'']">欢迎来到vue.js!</h1>
第三种方式: 在数组中嵌套对象
3.data加入flag进行判断,数组中嵌套对象,属性在前, 值在后
<h1 v-bind:class="['italic','thin',{'red':flag}]">欢迎来到vue.js!</h1>
第四种方式: 直接插入对象
4.前面类名,后面标识符 v-bild绑定对象时,对象的属性时类名,属性可带引号,也可以不带
属性的值时标识符.
<h1 v-bind:class="classObj">欢迎来到vue.js,learning makes me 哈皮!</h1>
classObj : {red:true,thin:true,italic:false,active:false},
11.通过属性绑定为元素绑定style样式
第一种方式: 直接以键值对的形式给style添加属性
<h1 v-bind:style="{color:'red','font-weigth':900}">welcome to vue.js</h1>
第二种方式:
<h1 v-bind:style="styleObj">welcome to vue.js</h1
styleObj:{color:'red','font-weigth':900},
第三种方式:
将两种样式放在一个数组里,同时渲染
<h1 v-bind:style="[styleObj1,styleObj2]">welcome to vue.js</h1>
styleObj1:{color:'red','font-weigth':900},
styleObj2:{background:'yellow','font-style':'italic'},
12.一些重要的v-指令
p17
##### vue指令之v-for和key属性
<!-- 注意在遍历对象身上的键值对的时候,除了有 val 和 key,在第三个位置还有一个索引 -->
<p v-for="(value,key,i) in user">{{value}} --- {{key}}----{{i}}</p>
数组
<p v-for="(user,i) in list">索引是:{{i}}---id:{{user.id}} --- name:{{user.name}}</p>
循环遍历数字:
<p v-for='count in 10'>这是第 {{count}} 次循环</p>
v-for迭代数字:起始是从1开始
p18
##### v-for 中 key的问题
v-for循环的时候,key属性只能使用 number 获取 string
只能使用v-bind 属性绑定的形式指定key的值
item身上的id是唯一的.
以后都这样写:<p v-for='item in list' :key="item.id">
保证数据的唯一性:
在组件中使用v-for循环的时候,或者在一些特殊的情况中如果有问题,
必须指定唯一的字符串.数字类型 :key值
p19
##### v-if 和 v-show 的 使用
当v-if 和 v-show 均为false时
v-if每次都会重新删除或者创建元素(有较高的切换性能消耗)
v-show 不会进行dom的删除操作 (有较高的初始渲染消耗)
只是切换了元素的 display:none 样式
如果元素涉及到频繁的切换,最好不要使用 v-if
如果元素永远不会显示出来被用户看到,最好使用v-if