Vue2.5入门-1
vue如何引用和使用，实例和挂在点的介绍
<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
// <h1>hellow {{msg}}</h1> //方式一的模板
</div> //挂载点
<script>
new Vue({ //一个vue实例
el: "#root" , //绑定挂载点
template: '<h1>hellow {{msg}}</h1>' //方式二的模板
data: {
msg: "hellow word"
}
})
</script>
</body>
</html>
挂载点，模板和实例
Vue实例中的数据，事件和方法
插值表达式与v-text和v-html
//插值表达式 {{mgs}} //标签绑定内容 v-text和v-html
<body>
<div id="root">
{{msg}}
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
msg: "hellow word",
number: '<span>123</span>'
}
})
</script>
</body> //v-text 输出 <span>123</span> 会转义
//v-html 输出 123 不会转义
事件函数v-on ，注意v-on: = @
<h1 v-text="number" @click="handleClick"></h1>
<h1 v-html="number" v-on:click="()=>{alert(123)}"></h1> methods:{
// handleClick: function(){
// alert(321);
// }
handleClick: function(){
this.msg = "world";
}
}
Vue 中的属性绑定和双向数据绑定
属性绑定v-bind，注意v-bind: = :
<div id="root" v-bind:title="title">
{{content}}
</div>
双向数据绑定，v-model
<div id="root" v-bind:title="title">
<input v-model="content">
<div>{{content}}</div>
</div>
Vue中的计算属性和侦听器
计算属性，作用是将以前计算过的相同值做缓存，可以提高效率
侦听器，监测某一个数据或计算属性发生变化
<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></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" ,//和哪一个dom节点绑定
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {//计算属性
fullName: function(){
return this.firstName + this.lastName;
}
},
watch: { //侦听器
// firstName: function(){
// return this.count++;
// },
// lastName: function(){
// return this.count++;
// }
fullName: function(){
this.count++;
}
}
})
</script>
</body>
</html>
v-if，v-show，v-for指令
v-if和v-show的区别，v-if会将元素从dom节点删除，但v-show不会
v-for中v-bind:key
<div id="root">
<div v-show="isShow">hello word</div>
<button @click="isShow1">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
isShow: true,
list: [1,1,3]
},
methods: {
isShow1: function(){
this.isShow = !this.isShow;
}
}
})
</script>
Vue2.5入门-1的更多相关文章
- vue2.0入门
vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工 ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- Vue2.5入门-2
todolist功能开发 代码 <!DOCTYPE html> <html> <head> <title>vue 入门</title> &l ...
- Vue2.0 入门 安装Vue-cli
因为要用到npm命令先按装node.js 具体安装如下: 一.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目 ...
- Vue2.5入门-3
安装和使用 全局安装vue npm install --global vue-cli 创建基于webpack模板的新项目 vue init webpack my-project 安装依赖 cd my- ...
- vue2.x入门学习
vue安装 # 最新稳定版本 $ npm install vue # 最新稳定 CSP 兼容版本 $ npm install vue@csp 引包 cd /d/vue/demo cnpm instal ...
- Vue2.5学习路线及基础知识总结。
在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...
- Vue入门到TodoList练手
学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...
- vue
vue.js 插件 setting--> plugins 搜索vue,下载安装如果想要高亮显示*.vue文件,可以在File Types 选项里找到HTML,然后在下方手动添加*.vue,这样就 ...
随机推荐
- 通过Windows Server 2008 R2建立iSCSI存储
名词解释:iSCSI技术是一种由IBM公司研究开发的,是一个供硬件设备使用的可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行 SCSI协议,使其能够在诸如高速千兆以太网上 ...
- 计算机作业（Excel课程表） 物联网 王罗红
- node升级 npm的升级
安装方法: 1.产看node版本,没安装的请先安装: node -v 2.清楚node缓存: sudo npm cache clean -f 3.安装node版本管理工具'n'; sudo npm i ...
- 鸡肋提权之变态root利用
你急有毛用,我电脑没带,怎么搞? 联系了基友adminlm牛看看吧,他说有防护软件啥的,有root,无法UDF,于是我让他去Mof,经历一番周折,知道了,对mof目录也锁定了权限,无法用root导出m ...
- 秒杀场景下MySQL的低效（转）
秒杀场景下MySQL的低效 2016-01-14 17:12 178人阅读 评论(0) 收藏 举报 最近业务试水电商,接了一个秒杀的活.之前经常看到淘宝的同行们讨论秒杀,讨论电商,这次终于轮到我们自己 ...
- Hive分区表创建，增加及删除
1.创建Hive分区表,按字段分区 CREATE TABLE test1 ( id bigint , create_time timestamp , user_id string) partition ...
- UVa 11346 - Probability（几何概型）
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- BZOJ1177:[APIO2009]Oil(枚举,前缀和)
Description 采油区域 Siruseri政府决定将石油资源丰富的Navalur省的土地拍卖给私人承包商以建立油井.被拍卖的整块土地为一个矩形区域,被划分为M×N个小块. Siruseri地质 ...
- 【模板】Dijkstra总结
Dijkstra算法使用于跑最短路的算法. 算法思想 假定图是不带负权的有向图或无向图,采用贪心策略,每次扩展一个距离为最短的点,在以这个点为中间点,更新其他的所有点的距离.当所有边权都为正时,由于不 ...
- 3、Spring Cloud - Eureka（构建服务端/客户端）
3.1.Eureka简介 3.1.1.什么是 Eureka 和Consul.Zookeeper 类似, Eureka 是一个用于服务注册和发现的组件,最开始主要应用 于亚马逊公司旗下的云计算服务平台 ...