vue初识
定义：Vue.js是一套构建用户界面的框架，只关注视图层
Vue.js是前端的主流框架之一，和Angular2+、React.js一起，并成为前端三大主流框架！
优点：
1、使用框架，能够提高开发的效率
2、提高代码的维护性，提高效率
3、让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑
4、响应式（数据的响应式）
框架与库的区别：
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式的概念 代表引用变量-->
{{title}}
</div>
<div>描述</div>
<div>{{intro}}</div>
</body>
<script>
//创建vue的实例
var vm = new Vue({
//指定vue控制界面区域 ，只写id 唯一
el : "#app",
//界面的数据
//之后我们在操作的时候更多的是操作数据，去影响界面宣染
//
data:{
title:"hello vue",
intro:"这是vue的介绍"
}
})
</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事件绑定 简写@
<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>
事件修饰符：
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次
//阻止事件冒泡
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 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>
posted on
