vue入门——基本概念
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
vue入门——基本概念的更多相关文章
- Vue 入门之概念
Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
随机推荐
- JS自定义手机端H5键盘
在输入车牌号的时候,因为很多车牌号都是数字字母混合排列的,所以如果用输入法输入就需要频繁切换数字跟字母,有点麻烦. 在这里我们就用自定义一个弹出框代替键盘来使用. 1.首先,要禁止掉文本框弹出输入法, ...
- php配置优化-生产环境应用版
[global] error_log = log/php-fpm.log log_level = warning emergency_restart_threshold = 10 emergency_ ...
- 再学UML-深入浅出UML类图（二）
类与类之间的关系(1) 在软件系统中,类并不是孤立存在的,类与类之间存在各种关系,对于不同类型的关系,UML提供了不同的表示方式. 1. 关联关系 关联(Association)关系是类与 ...
- js原型链继承及调用父类方法
方法1: var Parent= function () { }; Parent.prototype.process = function(){ alert('parent method'); }; ...
- 小故事学设计模式之Observer : (三) 老婆帮忙订机票
(IT的事就是过场多,过场多了就容易忘,所以我们不妨看一个记一个,这也是一个办法,顺便还能跟同行们交流一下) 要和老婆一起回老家了, 成都离我们安徽太远, 两个人飞一下过去就要花掉近三千块, 于是我 ...
- Python语言程序设计基础（2）—— Python程序实例解析
温度转换 def tempConvert(ValueStr): if ValueStr[-1] in ['F','f']: ans = (eval(ValueStr[0:-1]) - 32)/1.8 ...
- LG3690 【【模板】Link Cut Tree （动态树）】
题目 终于去写\(LCT\)了 这个大爷讲的挺好的 板子 #include<algorithm> #include<iostream> #include<cstring& ...
- 【[ZJOI2008]骑士】
这道题好暴力啊 发现自己刚学\(OI\)的时候对着这道题写了一个大搜索 发现已经看不懂了 果然我现在菜到连一年半前的我都不如了 这其实是一个基环树\(dp\)啦,基环树上的最大点独立集 其实很简单,我 ...
- 2018.12.25 Spring中JDBCTemplate模版API学习
1 Spring整合JDBC模版 1.1 spring中土拱了一个可以操作数据库的对象.对象封装了jdbc技术 JDBCTemplateJDBC模板对象 1.2 与DBUtils中的QueryRunn ...
- unbuntu循环登录
http://www.myexception.cn/operating-system/1707766.html