vue入门——基本概念
2024-08-27 12:38:30
1. 挂载点，模板，实例的关系？
首先附上一个基本demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h1>{{msg}}</h1> -->
</div>
<script>
new Vue({
el: "#root",
template: '<h1>{{msg}}</h1>',
data: {
msg: "HEllo Vue "
}
})
</script>
</body>
</html>
解释：
挂载点：就是el 所代表的id为root的div,指明vue只对这个div起作用
模板：div里面的内容
实例：在vue实例中指定了挂载点，模板，vue会自动结合模板和数据生成最后的内容，然后把内容放在挂载点之中
2. 计算属性和侦听器(computed 与watch)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName">
名：<input v-model="lastName">
<div>全名：{{fullName}}</div>
<div>计数：{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: ' ',
lastName: ' ',
count: 0
},
computed:{
fullName: function(){
return this.firstName+ ' '+ this.lastName
}
},
watch:{
fullName: function(){
this.count++
}
}
})
</script>
</body>
</html>
3. v-show 和 v-if 的区别：
附上代码显示隐藏的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello vue</div>
<!-- <div v-show="show">hello vue</div> -->
<button v-on:click="handle">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data:{
show: true
},
methods:{
handle: function(){
this.show = !this.show;
}
} })
</script>
</body>
</html>
解释：运行以上代码，查看控制台后发现:
v-if 是直接从整个dom元素中删除该节点（每次触发需要重新创建dom或销毁dom），
而v-show是通过display:none来实现节点的隐藏,
需要频繁的操作时使用v-show 效率更高，如果只需操作一次使用v-if
最新文章
- 机器学习笔记----Fuzzy c-means(FCM)模糊聚类详解及matlab实现
- X/Y型文案
- DIV重叠 如何优先显示（div浮在重叠的div上面）
- Qt 二级菜单栏 中文无法输入问题
- [转]linux主机644、755、777权限详解
- mac 查看系统时区
- 火狐flash插件
- 李洪强iOS开发Swift篇---11_变量&常量&元组
- SGU 149. Computer Network( 树形dp )
- android 之Fragment（官网资料翻译）
- 基于visual Studio2013解决C语言竞赛题之1015日期计算
- tomcat配置sqlserver数据库
- c++(非递归排序)
- spring(一、原理、IOC、AOP、依赖注入)
- xpath获取带注释的text
- 今天GG
- Mac 10.12使用free命令（fish）
- Centos下yum安装Nginx报错 No package nginx available.
- 数据结构与算法之Stack（栈）的应用——in dart
- PAT 1086 Tree Traversals Again