vue初识（渐进式JavaScript框架）
定义：Vue.js是一套构建用户界面的框架，只关注视图层
Vue.js是前端的主流框架之一，和Angular2+、React.js一起，并成为前端三大主流框架！
优点：
1、使用框架，能够提高开发的效率
2、提高代码的维护性，提高效率
3、让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑
框架与库的区别：
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
MVC与MVVM的区别
MVC是后端的分层开发概念;
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VMViewModel;
Vue.js 的代码结构
1、引入vue.js
2、写视图层，我们要展示的内容 （body里的html代码）
3、实例化Vue（） var vm = new Vue （{}）
data： 存放数据
el: 控制的是那块视图
methods： 放置响应方法
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{title}}</div>
//属性绑定，v-bind 加在属性前，等号后写data属性名，可以简写，直接加上冒号（:）
<input type="text" :value="intro">
//事件绑定 v-on:click="随便起的名"，这个名在jsmethods中添加事件响应程序
<input type="button" @click="popOn">
</div>
</body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>//创建vue的实例
var vm = new Vue({ //指定vue控制界面区域 ，只写id 唯一 el : "#app", //界面的数据 //之后我们在操作的时候更多的是操作数据，去影响界面宣染 // data:{ title:"hello vue", intro:"这是vue的介绍" }, methods:{
//单击事件，给按钮绑定了一个单击事件，这是单击事件的相应程序
popOn(){
console.log(this.title)
}
},
})</script> </html>
插值表达式、v-cloak、v-text、v-html
插值表达式 {{}} 可以在内容前后插入一些内容
v-cloak ： 当js运行完之后显示页面。
v-text：会替换掉元素里的内容
v-html：可以渲染html界面 （识别html标签）
<style>
/* 属性选择器 */
/* 使js加载完成之后在显示页面 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h3 v-cloak>{{title}}</h3>
<!-- v-text覆盖原本的内容 -->
<div v-text="intro">本来的内容</div>
<!-- 插值内容前后 -->
<div>{{intro}}本来的内容</div>
<div v-html="richText"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建vue的实例
var vm = new Vue({
el: "#app",
data: {
title: "常用指令",
intro: "v-text",
richText:"<div>本来的内容</div>"
}
})
//插值表达式{{}}，可以在前后插入一些内容
// v - text：会替换掉元素里的内容
// v
v-bind 界面元素属性值的绑定
1.括号里不加引号的都是我们data里的数据读取
2.如果想使用字符串需要加上引号
3.里面可以写表达式
4.里面也可以调用定义好的方法，拿到的是方法的返回值
使用：
<body>
<div id="app">
<div v-bind:name="divName">标题</div>
<input v-bind:type="inputType" value="点击">
</div>
<script>
/* v - bind
界面元素属性值的绑定
1.括号里不加引号的都是我们data里的数据读取
2.如果想使用字符串需要加上引号
3.里面可以写表达式
4.里面也可以调用定义好的方法，拿到的是方法的返回值 */
var vm = new Vue({
el: "#app",
data: {
divName: "title",
inputType: "button"
}
})
</script>
v-on 进行事件的绑定，我们用的最多的是click事件绑定 简写@
：click="dianjishijian(参数)" 可以传参数
<body>
<div id="app">
<h3>{{title}}</h3>
<!-- v-on：事件类型 = “函数名” -->
<button v-on:click="changeTitle1">修改</button>
<button @click="changeTitle">修改2</button>
<button @dblclick="dbl">双击</button>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "天亮教育"
},
methods: {
changeTitle() {
console.log("点击");
console.log(this.title);//天亮教育
// console.log(title1);//实参
},
changeTitle1() {
console.log("修改");
},
dbl() {
console.log("双击了")
}
}
})
</script>
事件修饰符：
1.stop阻止冒泡
2.prevent阻止默认事件
3.capture添加事件侦听器时使用事件捕获模式
4.self只当事件在该元素本身（比如不是子元素）触发时触发回调
5.once事件只触发一次
//阻止事件冒泡 .box { 100px; height: 100px; background-color: red; } .box1 { 50px; height: 50px; background-color: blue; } </style> </head> <body> <div id="app"> <div class="box" @click="clickBox"> <div class="box1" @click.stop="clickInner"></div> </div> </div> </body> <script> const vm = new Vue({ el:"#app", data:{ }, methods: { clickBox() { console.log("点击了外盒子"); }, clickInner(){ console.log("点击的内盒子"); } } }) </script> //阻止默认事件 <body> <div id="app"> <a href="#" @click.prevent ="aclick">跳转</a> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ }, methods:{ aclick(){ console("跳转") } } }) </script> //捕获模式 <body> <div id="app"> <div class="box" @click.capture="clickBox"> <div class="box1" @click.capture="clickInner"> <div class="box2" @click = "clickInner2"></div> </div> </div> </div> <!-- 捕获从外向里 --> </body> <script> const vm = new Vue({ el: "#app", data: { }, methods: { clickBox() { console.log("点击了外盒子"); }, clickInner() { console.log("点击的内盒子"); }, clickInner2() { console.log("点击了最内的盒子"); } } //只当事件在该元素本身（比如不是子元素）触发时触发回调 <body> <div id="app"> <div class="box" @click.self="clickBox"> <div class="box1" @click.self="clickInner"> <div class="box2" @click.self="clickInner2($event)"></div> </div> </div> </div> <!-- 捕获从外向里 --> </body> <script> const vm = new Vue({ el: "#app", data: { }, methods: { clickBox() { console.log("点击了外盒子"); }, clickInner() { // console.log(e.target) console.log("点击的内盒子"); }, clickInner2(e) { console.log(e.target) console.log("点击了最内的盒子"); } } }) </script> //事件只触发一次 <body> <div id="app"> <button @click.once="boxclick">点击</button> </div> </body> <script> var vm = new Vue({ el:"#app", data:{}, methods: { boxclick(){ console.log("点击"); } } })
v-model数据双向绑定
作用：数据双向绑定
注意：绑定的是表单控件
<body>
<div id="app">
<!-- 作用：数据双向绑定
注意：绑定的是表单控件 -->
<input type="text" v-model="num1">
<button @click = "btn">点击</button>
</div>
</body>
<script>
var vm = new Vue ({
el:"#app",
data:{
num1:1
},
methods:{
btn(){
console.log(this.num1)
}
}
})
</script>
V-for
1.便利数组，参数(item,index)inlist
2.便利对象，参数(value,key,index)inlist
3.便利数字，numin10(1~10)
<body>
<div id="app">
{{title}}
<ul>
<!-- i为索引 item为内容 -->
<input type="text" v-model="item1">
<button @click="search">检索</button>
<li v-for="(item,i) in list" @click="show(item.name)" >id：{{item.id}} ----值：{{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
title: "hello",
obj: {
age: 10
},
list: [{
id: 1,
name: "李白"
},
{
id: 2,
name: "杜甫"
},
{
id: 3,
name: "孟浩然"
}],
list1:[],
item1: null
},
methods:{
show(name){
alert(name);
},
search(){
this.list1 = this.list.filter(item=>{
return item.name == this.item1;
})
}
}
})
</script>