一、vue介绍
什么是vue?
Vue 是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层。
vue特点
1.采用组件式开发,提高代码复用率,且让代码更高维护
2.声明式编码,让编码人员无需dom操作,提高开发效率
3.使用虚拟机dom和优秀的diff算法,尽量复用节点
第一个vue
编写步骤
1.从官网引入vue.js文件
网站链接:https://v2.cn.vuejs.org/v2/guide/installation.html
2.定义一个div
3.创建一个new Vue()实例化Vue应用程序
(1)el选项:元素element缩写,指定被 Vue 管理的Dom 节点入口(值为选择器),必须是一个普通的HTML标签节点,
(2)data选项:指定初始化数据,在Vue 所管理的 Dom 节点下,可通过模板语法来进行使用
4. 标签体显示数据:{{xxxxx}}
5. 表单元素双向数据绑定:v-model
6. 注意:el的值不能为 html 或 body
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<!-- {{}} 用于标签体内显示数据 -->
<p>{{msg}}</p>
<p>{{Date.now()}}</p>
<!-- v-model 进行数据的双向绑定 -->
<input type="text" v-model="msg">
</div>
<script>
// 创建一个vue实例
new Vue({
el: '#root',//指定被vue管理的入口,值为选择器 不可以是body或者html
data: {//用于初始化数据 在vue实例管理的dom节点下 可以通过模板请求来引用
msg: 'hello world',
p:555
}
})
</script>
</body>
</html>
使用vue注意事项
1.使用vue时,必须创建一个vue实例,并且要传入配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
3.root容器里的代码被称为 vue模板
4.vue容器和实例是一一对应的,且容器里会自动读取到data中的所有属性
5.真实开发中只有一个vue实例
6.{{xxx}}中的xxx要写js表达式
7.一旦data中的数据发生改变,那么模板中用到该数据的地方会自动更新
MVVM模型
什么是MVVM模型?
MVVM是 Model-View-ViewModel 的缩写,它是一种软件架构风格
Model:模型,数据对象(data当中的数据)
View:视图,代码模板页面(用于渲染数据)
ViewModel:视图模型,其实本质上就是 Vue 实例
实际操作:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
{{name}}
{{$createElement}}
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: 'xihua',
sex: 'nan'
}
})
console.log(vm);
</script>
</body>
</html>
结果图:
1.data中所有的属性 最后都出现在vm身上
2.vm身上所有的属性 vue原型上的所有属性 在vue模板里都可以直接使用
模版语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
1.插值语法
功能:用于拆解标签体的内容
写法:{{xxx}},xxx是js表达式,而且可以直接读取到data中所有的属性
案例源码:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<h1>1.插值语法</h1>
<h3>{{name}},真好看</h3>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '小花',
}
})
</script>
</body>
</html>
效果图:
2.指令语法
v-once: 通过once指令 ,能执行一次性的插值,当数据发生改变时 插值处的内容不会更新
案例源码:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<h1>2.指令语法</h1>
<span v-once>{{message}}</span>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
message: '一切正常',
}
})
</script>
</body>
</html>
效果图:
3.HTML指令
作用:如果时html格式数据 双大括号会将数据解释为普通文本 为了输出真正的html 需要用v-html指令。
Vue为了防止XSS攻击,再此指令上做了安全处理,当发现输出内容有script标签时,则不渲染
案例源码:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<h3>3.html指令</h3>
<!-- 如果时html格式数据 双大括号会将数据解释为普通文本 为了输出真正的html 需要用v-html -->
<p>双大括号:{{contentHtml}}</p>
<p>v-html指令:<span v-html="contentHtml"></span></p>
<div v-html="contentS"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
contentHtml:'<span style="color: red;">我是红色的字</span>',
contentS:'<script>alert("123")<\/script>',//v-html指令防xss攻击 不识别script
}
})
</script>
</body>
</html>
效果图:
双大括号语法:格式{{ }} 作用:使用与标签体中,用于获取数据,可以使用JavaScript表达式
4.v-bind元素绑定指令
完整格式:v-bind:元素的属性名=‘xxxx’
缩写格式:元素的属性名=‘xxxx’
作用:将数据动态绑定到指定的元素上
案例源码:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<h3>4.v-bind元素绑定指令</h3>
<!-- 将动态元素绑定到指定元素的属性上 -->
<!-- <img v-bind:src="imgUrl" alt="">缩写 -->
<img :src="imgUrl" alt="">
</div>
<script>
new Vue({
el: "#root",
data: {
imgUrl: 'https://v2.cn.vuejs.org/images/logo.svg',
}
})
</script>
</body>
</html>
效果图:
5.v-on事件绑定指令
- 完整格式:v-on:事件名称=“事件处理函数名”
缩写格式:@事件名称=“事件处理函数名”,注意@后没有冒号
2.事件的回调需要配置在methods中,最终会出现在vm上
3.methods中配置函数,不要使用箭头函数,否则this的指向就不是vm了
4.@click=“dome” 和 @click="dome($event)"的效果一致 但是后者可以传参
作用:监听DOM事件
案例源码:
<!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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
<h3>{{num}}</h3>
<button v-on:click="add">点击+1</button>
<button @click="sub">点击-1</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
num: 100
},
methods: {
add(even) {
console.log(even);
// console.log(this);//指向vm/vue实例对象
this.num++
},
sub(num, event) {
console.log(num);
console.log(event);
this.num--
}
}
})
</script>
</body>
</html>
效果图:
6. 计算属性
computed选项定义计算属性
计算属性:类似于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="./vue/day1/vue.js"></script>
</head>
<body>
<div id="root">
数学:<input type="text" v-model="mathematics">
语文:<input type="text" v-model="language">
<br><br>
总得分:(函数)<input type="text" v-model="sumScore()">
<br><br>
总得分:(计算属性-单项绑定)<input type="text" v-model="sumScore1">
<br><br>
总得分:(计算属性-双项绑定)<input type="text" v-model="sumScore2">
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
mathematics: 120,
language: 148,
},
methods: {
sumScore: function () {
console.log('函数调用了');
//`this`指向当前 vm 实例,减 0 是为了字符串转为数字运算
return (this.mathematics - 0) + (this.language - 0)
}
},
// 这里写计算属性
computed: {
sumScore1() {
//计算属性 默认 getter 只支持单向绑定
console.log('监听属性调用了');
return (this.mathematics - 0) + (this.language - 0)
},
sumScore2: {
//指定 getter/setter 双向绑定
get: function () {
return (this.mathematics - 0) + (this.language - 0)
},
set: function (newValue) {//有了set可以进行双向数据绑定
var avgScore = newValue / 2//取平均值
this.mathematics = avgScore
this.language = avgScore
}
}
}
})
</script>
</body>
</html>
标签:Vue,绑定,vm,更新,vue,笔记,Vue2,data,属性 From: https://blog.csdn.net/m0_63634307/article/details/141139054方法和计算属性的区别
1.方法需要加小括号
2.方法总会执行两次
3.方法没有缓存,每次都会被调用
4.计算属性有缓存 只有当计算数学体内的属性值被更改以后才会调用,如果没有发生变化 则取它上一次计算的结果
5.函数只支持单向的
6.计算数学默认只有get函数,而没有set函数,所以只支持单向数据绑定 如果需要双向,则需要手动设