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 ...
随机推荐
- Mac安装Gradle eclipse安装buildship插件
一直用的eclipse+mvn,现在需要导入别人的gradle项目,所以下载了gradle和在eclipse中安装了buildship插件. 一,mac下安装gradle 1,点击网页https:// ...
- 转：什么是4D（DRG、DLG、DOM、DEM）数据？
ps:摘抄地址http://blog.163.com/wangqing_rs/blog/static/16451519120111026102916472/ 什么是4D(DRG.DLG.DOM.DE ...
- CSS3中的Flexbox弹性布局（一）
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
- GridCellChoiceEditor
choice_editor = wx.grid.GridCellChoiceEditor(choices_list, True) grid.SetCellEditor(row, col, choice ...
- 第一次Scrum冲刺（云医院）
一.小组第一次冲刺任务 1.小故事 小故事1 有一天,A牙齿突然开始痛,想着去医院看看,但是去了医院发现排队挂号的人很多,不知道什么时候才能轮到B.于是A想着能不能提前预约,免去排队的时间.正好云医院 ...
- python+pymssql+selenium 获取短信验证码登录(实战练习)
登录页面输入手机号, 获取短信验证码(验证码有10分钟有效期) 1 连接sql server数据库,获取10分钟之内的有效短信验证码 2 页面输入手机号,并获取验证码.若存在有效验证码则输入验证码,若 ...
- POJ-1836 Alignment---LIS
题目链接: https://cn.vjudge.net/problem/POJ-1836 题目大意: 题意:令到原队列的最少士兵出列后,使得新队列任意一个士兵都能看到左边或者右边的无穷远处.就是使新队 ...
- JavaMail简单应用
版权声明:本文为博主原创文章,未经博主同意不得转载. --caicongyang https://blog.csdn.net/caicongyang/article/details/33731395 ...
- python:包与异常处理
一.包 1,什么是包? 把解决一类问题的模块放在同一个文件夹里-----包 2,包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...imp ...
- 多目标规划——fgoalattain
多目标规划 多个目标函数,之间可以用他们的重要程度分析,来一次进行这个序贯算法,当然也可以无限逼近的方案—— clc,clear; % 约束 a = [- - - - ]; b = [- - ]; ...