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 ...
随机推荐
- mui 窗体切换
手机实现窗体切换 1.在5+环境下(即H5app) 先初始化: mui.init({ subpages:[{ url:"page1.html",//子页面HTML地址,支持本地地址 ...
- 【Linux】 Linux编程规范&Linux 编程环境搭建
一.通过Samba映射网络驱动器 菜单栏-计算机-映射网络驱动器 English 菜单栏-Home -Easy access-Map as drive 编辑代码使用 Windows 编译 运行程序在 ...
- 【起航计划 036】2015 起航计划 Android APIDemo的魔鬼步伐 35 App->Service->Messenger Service Messenger实现进程间通信
前面LocalService 主要是提供同一Application中组件来使用,如果希望支持不同应用或进程使用Service.可以通过Messenger.使用Messgener可以用来支持进程间通信而 ...
- git相关操作（githug）
Level 15 restructure 关卡描述 你添加了一些文件到你的仓库,但现在知道你的项目需要进行调整.创建一个新的文件夹命名为“src”,使用git将所有的".html" ...
- C++ cin不支持录入空格
如果在C++中,用cin>>str;这种方法来接收字符串那么录入的str不能包含空格,否则它会按照空格将整个字符串切分成若干段.如果你要是想输入带空格的字符串那就要用到getline()这 ...
- JsonResponse、FileResponse和StreamingHttpResponse
一.JsonResponse对象 class JsonResponse(data,encoder=DjangoJSONEncoder,safe=True,json_dumps_params=None, ...
- Codeforces Round #361 (Div. 2) E. Mike and Geometry Problem 【逆元求组合数 && 离散化】
任意门:http://codeforces.com/contest/689/problem/E E. Mike and Geometry Problem time limit per test 3 s ...
- 使用ParseExact方法将字符串转换为日期格式
实现效果: 知识运用: DateTime结构的ParseExact方法 public static DateTime ParseExact(string s,string format,IFormat ...
- XCode插件因为升级不能用了怎么办？几个步骤教你搞定
之前XCode安装了自动注释的插件 VVDomenter.升级之后不能使用了怎么办?跟着我做吧. 1.打开xcode插件所在的目录:~/library/Application Support/Deve ...
- maven学习记录二——依赖管理
5 依赖管理 Jar包的管理 需求:整合struts2 页面上传一个客户id 跳转页面 5.1 添加依赖: 打开maven仓库的视图: 5.2 重建索引 1. 创建m ...