初识Vue之基础指令使用（初学者请进~）
2023-09-11 14:20:19 时间
vue是一套构建用户界面的渐进式的js框架，与其他大型框架不同的是，vue被设计为可以自底向上的逐层应用，vue的核心库只关注视图层，不仅易于上手还便于第三方数据域或者既有项目的整合
目录
一、引言（MVVM模式）：
为什么Vue如此火热呢？那是因为vue是MVVM模式(双向数据绑定模式)的实现者，在mvvm架构中是不允许数据和视图直接通信的，只能通过ModelView（也就是MV）来通信，而ViewModel就是定义了一个observer（观察者）。什么是MVVM呢？可以分为下面三部分：
- Model：模型层，在这里表示JavaScript对象
- View ：视图层，在这里表示Dom（HTML操作的元素）
- ViewModel：连接视图和数据的中间件
而ViewModel的作用有两个,分别如下：
- 能够观察到数据的变化，并对视图对应内容进行更新
- 能够监听到视图的变化，并能够通知数据发生改变，核心是：实现了Dom监听与数据绑定
二、插值表达式：
2.1 插值表达式的使用
插值表达式用在HTML中被绑定的元素中，目的是通过插值表达式来获取Vue对象的属性和方法，值得注意的是：插值表达式不能写在HTML标签中，不能作为属性值的一部分。
插值表达式能够怎样使用呢？大致有以下几种：
1、使用插值表达式获取data数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
{{mydata}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
mydata:'hello vue'
}
})
</script>
</html>
2、使用插值表达式调用methods方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--调用methods方法-->
{{sayhi()}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
sayhi:function(){
alert("hello")
}
}
})
</script>
</html>
3、使用插值表达式定义一个数组，并获取数组元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--使用插值表达式定义一个数组，并获取数组第二个元素-->
{{['zhangsan','lisi','wangwu','maliu'][1]}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
}
}
})
</script>
</html>
4、使用插值表达式定义对象，并获取对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--使用插值表达式定义对象，并获取对象name属性-->
{{{name:'zhangsan',age:22}.name}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
}
}
})
</script>
</html>
三、基础指令：
2.1 v-model（双向数据绑定）
使用v-model可以实现数据插值表达式中数据与vue中的data数据进行双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{mydata}}
<input type="text" v-model="mydata" />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
mydata:'hello vue'
}
})
</script>
</html>
2.2 v-on (事件绑定)
v-on可以通过配合具体的事件名，来绑定vue中定义的函数（methods里的）。v-on还可以简写，例如：v-on：input=‘’ 可以写成 @input=‘’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--v-on 写法一-->
<button v-on:click="btn">点我</button>
<!--v-on 写法二-->
<button @click="btn">点我</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
btn:function(){
alert("你点了我一下")
}
}
})
</script>
</html>
3.3 v-bind（HTML属性绑定）
在前面我们讲到了，插值表达式是不能写在HTML的标签属性内的，那如果一定要用vue中的属性作为html标签中属性内容，就可以通过v-bind进行属性绑定。注：v-bind也可以简写，例：v-bind：href=‘link’ 可以写成 ：href=‘link’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<a v-bind:href="link">百度一下</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
link:'http://www.baidu.com'
}
})
</script>
</html>
3.4 v-once（指明元素只出现一次）
v-once指令，指明了此元素数据（插值表达式）中只出现一次，数据内容的修改不会影响此元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p v-once>
{{mydata}}
</p>
<input type="text" v-model="mydata"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
mydata:'我是data'
}
})
</script>
</html>
3.5 v-html 与 v-text
v-html ：会将vue中的属性的值作为html的元素来使用
v-text： 会将vue中的属性的值作为纯文本（text）元素使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--v-html -->
<p v-html="htmldata"></p>
<!--v-text-->
<p v-text="textdata"></p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
htmldata:' <h1>hello vue</h1>',
textdata:' <h1>hello vue</h1>'
}
})
</script>
</html>
测试结果：
3.6 computed（计算属性）
一些常用的函数可以缓存起来，在调用的时候可以直接使用缓存中结果，以此提高效率。注意：computed虽然存放的是函数，但是在调用的时候，computed里的东西是相当于一个属性来使用的，所以我们在调用时不能使用‘（）’，因为‘（）’是调用函数的，而不是调用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{getCurrentTime}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
computed:{
getCurrentTime:function(){
return new Date();
}
}
})
</script>
</html>
3.7 watch（监控属性）
watch用来监控参数的变化，并调用函数。newValue是获取参数最新的值，oldValue是参数修改前的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="tltleNum" />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
tltleNum:11
},
watch:{
tltleNum:function(newValue,oldValue){
console.log(newValue+':'+oldValue);
}
}
})
</script>
</html>
测试结果：
本篇文章为vue基础指令学习，适合刚入门的新手阅读，希望能帮助到大家，谢谢浏览
相关文章
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
- (尚017)Vue插件
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- vue基础篇---生命周期
- vue基础篇---修改对象或数组的值，页面实时刷新
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- Vue中 .env .env.development .env.production 详细说明
- Vue style 深度作用选择器 >>> 与 /deep/（sass/less）
- （9）打鸡儿教你Vue.js
- 基于Java+VUE+MySQL 实现聊天系统【100010273】
- 02-vue基础-Vue常用特性
- vue基础---实例
- vue实战入门进阶篇四：vue+elementui实现网站后台-主页框架实现
- vue实战入门基础篇十：从零开始仿门户网站实例-代码重构并发布项目
- vue实战入门基础篇九：从零开始仿门户网站实例-移动端界面适配
- vue实战入门基础篇六：从零开始仿门户网站实例-新闻资讯实现
- vue实战入门基础篇四：从零开始仿门户网站实例-网站首页实现
- vue学习笔记九：Jquery VS Vue之遍历方法对照
- vue学习笔记三：Jquery VS Vue之差异比较概览
- vue基础 Vue.extend
- Vue-router路由基础总结（一）
- vue基础（五），对todos的操作
- vscode快速生成vue代码---创建Vue代码模板
- 【VUE】vue配置Gzip压缩
- 解决VsCode启动Vue项目报错：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
- vue设置多入口教程