Vue 知识整理—02-起步
一:Vue 语法格式:
vue vm = new Vue({
//选项
})
二:Vue 实例:
<div id="app">
<p>{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
{message}
},
methods: {
details: function() {
''
}
}
})
</script>
三:Vue 选项(el data methods):
1. el
☞ 作用:指定管理的视图区域
☞ 指定方式:通过选择器或者 DOM 对象
☞ 注意:不能指定<body>和<html> 标签作为视图,因为<script>包含在<body>和<html> 标签中
2. data
☞ 作用:指定 vm 中的响应数据
☞ 注意:数据的使用需要提前声明
3. methods
☞ 作用:定义函数,提供给 vm 实例去使用
☞ 注意:fn ( ) { } 是推荐写法,等同于普通函数 function fn ( ) { }
不推荐使用箭头函数,因为箭头函数中没有 this ,可以理解为它的上一级,也就是说 this 的指向取决于定义它的位置
☞ 函数中的 this 就是 vm 实例
四:Vue 相关术语---模板语法:
1. 插值表达式:
2. 属性:
3. 表达式:
4. 指令:
5. 参数:
6. 修饰符
7. 用户输入:
8. 过滤器:
9. 缩写:
Vue 知识整理—02-起步的更多相关文章
- Vue 知识整理—01-基础
一:Vue是什么? Vue是一个JS框架. Vue.js是一套构建用户界面的渐进式框架. 库和框架的区别: ☞库:提供一些 API 工具函数,体现了封装的思想,需要我们主动调用: ☞框架:提供一套完整 ...
- Vue知识整理15:组件注册
采用局部注册组件: 将代码放在vue的一个实例中,而不是单列申明.
- Vue知识整理14:组件基础
组件:可以复用的实例.使用 v-component来实现 2.通过props属性添加相应的属性,并且在模板中渲染 当模板中包含多个组件时,则需要用一个div来包裹起来.如下: 可以将原来的的点击事件, ...
- Vue知识整理10:条件渲染(v-if v-show)
在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.
- Vue知识整理7:vue中函数的应用
在vue中使用函数对字符串做相应的处理: split:分割字符,将每个字符分割为一个数组值: reverse:将字符进行逆序排序: join:将字符连接: 最终输出结果.
- Vue知识整理6:JavaScript表达式
可在vue中运用js表达式,完成数据的运算(包括三元运算).比较等操作.
- Vue知识整理2:Vue生命周期方法
在vue执行过程中,可以分为beforeCreate.created.BeforeMount.mounted .BeforeUpdate.updated 等常用的方法,如下图所示. 除此之外,通过查 ...
- Vue知识整理1:$watch方法的使用
如下图所示:vue中,可以使用$watch方法显示变量的前面值和当前值,方便进行判断.使用方法: vm.$watch('a',function(newval,oldval){ ...... })
- Vue知识整理16:单文件组件
过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14
随机推荐
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
- Python 计算当真因子个数为偶数个时为幸运数,计算区间内幸运数之和
晚饭后朋友发来个问题,正好无事做,动手写了一下 若一个正整数有偶数个不同的真因子,则称该数为幸运数.如4含有2个真因子为 1 和 2 .故4是幸运数.求[2,100]之间的全部幸运数之和. 常规思路 ...
- struts2+springmvc+hibernate开发。个人纪录
对于很多新手来说,都不太清楚应该怎么去放置代码并让他成为一种习惯.个人的总结如下: 一.基础包类的功能 1.dao :提供底层接口 2.daoimpl:实现底层接口类,与底层交互 3.entity:实 ...
- 为KindEditor 添加“一键去除空格功能”
环境说明:KindEditor 4.1.11 一.确定你在使用KindEditor时,引用的是kindEditor-all.js,找到任何一个已经存在的功能,例如,清除HTML代码,我在做的时候本来 ...
- ElasticSearch(十)Elasticsearch检索出的数据列表按字段匹配的优先顺序及搜索单词拼音一部分搜不到数据
检索出的数据列表按字段匹配的优先顺序 一.举例 比如,发布一篇文章,文章包括基本的字段包括标题.发布时间.点击率.关键字.内容.当在页面中输入“教育”搜索关键词,会检索出指定字段包括“教育”的所有数据 ...
- Redis查漏补缺:最易错过的技术要点大扫盲
考虑到绝大部分写业务的程序员在实际开发中使用Redis时,只会Setvalue和Getvalue两个操作,对Redis整体缺乏一个认知.又恰逢笔者有同事下周要去培训Redis,所以笔者斗胆以Redis ...
- MYSQL数据库常用操作命令
1.连接MYSQL: mysql -h 主机地址 -u 用户名 -p 2.修改密码: 安装后第一次登录使用: mysqladmin (因为没有初始密码) 修改原密码: mysqladmin -u ro ...
- freopen()函数在ACM中的使用
#ifndef ONLINE_JUDGE freopen("in.txt","r",stdin); #endif https://blog.csdn.net/c ...
- python第一天2.28
2019年2月28日 今日内容大纲: 01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. 运行速度:飞机 内存:临时存储数据. 8g,16g, 运行速度:高铁 1,成 ...
- JAVA学习过程的基础笔记
1.JDK的安装与环境变量的设置与测试2.STS简单使用3.CMD控制器的使用4.JAVA的编译与反编译的执行过程5.一,变量与变量的使用 1.变量是在程序运行中其值可以改变的量,java程序的一个基 ...