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
随机推荐
- vue命令行错误处理
全局安装vue/cli时:npm install -g @vue/cli (1)Error: EACCES: permission denied, access '/usr/local/lib/nod ...
- Two (DP)
题意:求两串数字有多少个相同的子串,子串不要求连续. 思路:直接DP,dp[i][j] 代表A串长度为i.B串为j时满足条件的子串个数.转移dp[i][j] = dp[i -1][j] + dp[i] ...
- 小程序如何封装自定义组件(Toast)
1.创建和pages 同级的component目录新建一个myToast目录 例如: 2.myToast.wxml文件内容: <!-- 自定义toast组件 --> <!-- nam ...
- 编译原理---antlr实践+编译过程理解+课程理解知识点
0.其他说明 0.0编译器分为前.中.后端,课上主要学的是前端.前端又分为词法分析(lexical analysis).语法分析(syntax analysis).语义分析(semantic anal ...
- C/C++中数据的存储
学java时了解到不同的数据在系统中存储的位置不一样,有的存在栈里,有的存在堆里.学C/C++时没注意过这个,最近学数据结构时遇到了问题:在定义一个结构体的指针时,系统如何给它分配的空间?从而让我想去 ...
- AOP之proceedingjoinpoint和joinpoint区别(获取各对象备忘)、动态代理机制及获取原理代理对象、获取Mybatis Mapper接口原始对象
现在AOP的场景越来越多,所以我们有必要理解下和AOP相关的一些概念和机制. import org.aspectj.lang.reflect.SourceLocation; public interf ...
- github收藏夹
技术面试必备基础知识 https://github.com/CyC2018/CS-Notes 程序员简历模板列表 https://github.com/geekcompany/ResumeSample ...
- kubernets kubevirt 分析
目前kubevirt提供虚机管理的功能. kill, delete, shutdown, migration 等. VMI是virtual machine interface的缩写. SyncVMI, ...
- 自定义控件之SegmentControlView
SegmentControlView配合PageView使用 效果图 核心代码 package com.example.segmentcontrolview; import android.conte ...
- spring-data-jpa中save不触发数据库insert语句的问题
最近学习spring mvc,用到jpa简化DAO层代码,发现save死活不触发SQL语句,找了好久才解决这个问题,实在是坑.. <!-- 关键是这个bean,一定要设置正确才行 --> ...