vue基础技术点列表(一)
一. vue编写需要注意的细节
1.vue初始化实例时使用首字母大写,在添加全局配置时也要首字母大写(如添加组件Vue.component("",{template:"",prop:[]}))
2.Vue的配置项中名称内不能含有中短横- 星号* @ 标点,否则会报错.可以使用下划线;
3.设置Vue的全局配置如,组件,筛选函数,注意位置,设置前的Vue实例是不包含设置内容的
4.新版Vue的{{$index}}取消了,在for循环中要使用{{index}}取索引值 ,如 <li v-for="(item,index) in items">{{item}}{{index}}</li>
第一个是值,第二个参数是索引;
5.更改data中的值直接写app.msg即可(不用中间写data)
6.不要在选项属性或回调上使用箭头函数
因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例
7.由于html的特性是不区分大小写的,因此HTML中的标签哟啊传递值要写成短横线的形式;
8.对于所有的数据绑定,Vue提供了js表达式支持,每个绑定智能包含单个表达式,语句和控制流不会生效 否则会报compiling编译错误
二. Vue接口列举
1.插值 {{}}
2.v-if
3.v-show
4.v-for
5.v-model
6.new Vue({
el"",
data:{},
methods:{},
computed:{},
create:function(){this上下文指向调用他的Vue实例}
})
7.逆转字符串 this.message.split('').reverse().join('')
8.Vue全局注册组件 Vue.component("name",{template:"",props:[]/{}})
9.v-bind 将待办项传入循环输出的每个组件中
10.在一个大型的应用中,有必要将整个应用程序划分为组件
11.Vue应用是由一个通过new Vue创建的根Vue实例,以及可选的嵌套的,可复用的组件树组成.所有的Vue组件都是vue
实例并且接受相同的选项对象(一些根实例特有的选项除外)
12.Vue 实例被创建时他向响应式系统中加入了其data对讲中能找到的所有的属性,当这些属性值发生改变时,视图将会产生"响应",即匹配更新为新的值
13.ovject.freeze(data-obj)
14.$el
15.$data
16.$watch("data",function(new,old){})
17.var stop = app.$watch("a",cd);
stop();
18.生命周期钩子
created 钩子可以用来在一个实例被创建之后执行代码
19 $mount()初始化实例时未写入el,采用手动挂在到dom上
20 Vue使用了基于HTML的模板语法,允许开发中声明式的将DOM绑定至底层Vue实例的数据
在底层实现上,Vue将模板编译成虚拟DOM渲染函数,结合响应系统Vue能够智能地计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少;
21 文本插值 双大括号,
v-once指令,执行一次性地插值,当数据改变是,插值处的内容不会更新;
22 v-html
23.v-bind MUstache语法不能作用在html特性上,遇到这种情况应该使用v-bind命令
24.指令的作用是档表但是的值改变是,将其产生的两代影响响应式的作用于DOM.
25.有的指令可以接受一个参数,指令名称之后以冒号表示例如v-bind:href v-on:click
26修饰符
MOdifiers是以半角句号.致命的天数后缀,用于之处一个指令应该以特殊方式绑定.例如
.prevent修饰符告诉 v-on指令对于触发的时间调用 event.perventDefault();方法
27缩写语法
v-bind :
v-on @
冒号和@杜宇特性名称来说是合法字符
28.模板内的表达式适用于简单运算的在模板中放入天多的逻辑会让mubna过重切难以维护,对于复杂逻辑你都应该使用计算属性
29. computed revers
计算属性是基于他们的依赖进行缓存的,计算属性只有在他的相关依赖发生改变是才会重新求职,这意味msg还没有改变,多次房屋计算属性 reverse 会立即返回之前计算结果而不必再次执行函数
Date.new() 不是响应式依赖不会更新
调用方法总会再次执行函数;
三. 存疑
1.Vue组件的 款组件数据流 自定义事件通信 构建工具集成
2.v-once xxx
3. JSX 语法
4.Mustache语法
vue基础技术点列表(一)的更多相关文章
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- 3.Python编程语言基础技术框架
3.Python编程语言基础技术框架 3.1查看数据项数据类型 type(name) 3.2查看数据项数据id id(name) 3.3对象引用 备注Python将所有数据存为内存对象 Python中 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Java笔记(十二) 文件基础技术
文件基础技术 一.文件概述 一)基本概念 1.文件的分类: 1)文本文件:文件中每个二进制字节都是某个可打印字符的一部分.如.java文件 2)二进制文件:文件中每个二进制字节不一定用来表示字符,也可 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
随机推荐
- Hadoop学习(8)-scala环境配置及简单使用
学习scala的原因主要是因为以后要学习spark. scala是运行在java虚拟机上的,它是一种面向对象和函数式编程结合的语言,并兼容java程序 相对于java更简单 安装scala前提你要保证 ...
- 机器学习中的误差 Where does error come from?
误差来自于偏差和方差(bias and variance) 对于随机变量 X,假设其期望和方差分别为 μ 和 σ2.随机采样 N 个随机变量构成样本,计算算术平均值 m,并不会直接得到 μ (除非 ...
- Leader-Follower线程模型简介
参考58沈剑大神架构师之路上的文章,谈谈Leader-Follower线程模型: 上图就是L/F多线程模型的状态变迁点,共6个关键点: (1)线程有3种状态:领导leading,处理processin ...
- (十)c#Winform自定义控件-横向列表
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- Ubuntu下安装php7.1的gd,mysql,pdo_mysql扩展库
执行以下命令 # apt-get install php7.1-gd # apt-get install php7.0-mysql 重新启动 php7.1-fpm(因为我是安装的 Nginx 和 ph ...
- 编程杂谈——Platform target x64
在Visual Studio中选择.NET Framework框架并选用任意模板创建一个普通的Web应用工程,毫无疑问,此时应该是能够正常运行此工程的. 但是将工程属性->编译->Plat ...
- nginx之gzip压缩提升网站速度
目录: 为啥使用gzip压缩 nginx使用gzip gzip的常用配置参数 nginx配置gzip 注意 为啥使用gzip压缩 开启nginx的gzip压缩,网页中的js,css等静态资源的大小会大 ...
- count(*) count(1) count(column)的区别
count(1)中的1并不是指第一个column: count(*)和count(1)一样,包括对值为NULL的统计: count(column)不包括对值为NULL的统计,这里的column指的不是 ...
- 线上调试工具 jvm-sandbox使用
jvm-sandbox使用 1 快速安装 1.1 下载解压 # 下载最新版本的JVM-SANDBOX wget http://ompc.oss-cn-hangzhou.aliyuncs.com/jvm ...
- vue中组件通信
组件的通信 1. 父子组件通信 案例: //父子组件通信思路 // 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定 // 2 子组件用props 接受自定义的那个:号属性 Vue.co ...