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 ...
随机推荐
- 关于i 标签盛放背景图像
1.html部分 <div class="hover right"> <i class="log_change state_psd">& ...
- OSGi Bundle
OSGi Framework looks like OS, Bundle looks like program, OS can create a process to run program with ...
- 安装Android Studio的问题
大陆墙内安装最新Android Studio多出了很多问题,不使用VPN的话,注意以下问题: 1 一直停留在fetching Android sdk compoment information界面 A ...
- 夜色的 cocos2d-x 开发笔记 01
现在我们来实现在屏幕上出现一只飞机的效果. 首先我们要建立一个场景,显示在屏幕上,创建一个类,RunScence,现在你的项目目录应该是这个样子的. 之前没学过C++,.h文件我理解就是一个声明文件, ...
- requireJS的优化工具 ---- r.js
requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...
- SQL Server ->> 建立linked server到Azure SQL Server
EXEC master.dbo.sp_addlinkedserver @server = N'<nick_name_to_use>', @srvproduct=N'', @provider ...
- 用python管理Cisco路由器
目前DevOps是整个运维发展的方向,Network的运维也一样.使用程序控制底层的路由器是最基本的要求之一. 本文简单解释如何用Python控制路由器,对网络设备进行配置. Python和网络设备连 ...
- python:常用模块一
一.collections模块 1,在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultd ...
- PIL 一秒切九图 朋友圈发图神器
注意图片像素返回值是(宽度,高度),pil填像素点坐标原点左上角. 判断像素点是否在圆方程中. import numpy as np from PIL import Image file = inpu ...
- Uva 10061 进制问题
题目大意:让求n!在base进制下的位数以及末尾0的连续个数. 多少位 log_{10}256=log_{10}210^2+log_{10}510^1+log_{10}6*10^0 可以发现,只和最高 ...