- 浏览: 480039 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
VueJS 基础
所有的 Vue 组件都是 Vue 实例
slot
作用是否用于将子组件包含的元素预留存放的位置,但是里面的元素是不属于子组件的,它是属于父组件的,变量和方法都是访问父组件的,受父组件所控制。
因为没有slot,所以 <span>12345</span> 是不会显示的
<span>12345</span> 这样就会显示出来
加上名字就会放到对应名字的slot中
【1】name=’first’的slot标签被父组件对应的标签所替换(slot标签内部的内容被舍弃);
【2】name=’last’的slot标签,因为没有对应的内容,则显示该slot标签内部的内容。
VUE表达式,可以在标签内容上或绑定的属性上,表达式可以做到一个值的改变会引起表达式重新计算的变化,表达式可以是计算属性\方法\属性
v-for 指令可以迭代对象,也会有index的参数传入,key参数传入
计算属性
在处理一些复杂逻辑时是很有用的。
依赖变量发生改变时,它也会更新。与表达式类似,只不过不用每次引用都写表达式
计算属性与方法都可以在标签中引用,其依懒发生改变,都会重新计算和调用
但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
重新渲染
一般情况下vue推崇的是数据驱动 也是数据更新进而使组件得以重新渲染。
监听属性,通过监听属性进行相关的逻辑处理(如改变另一个属性的值等)
如果存在依懒多个属性的话可以使用计算属性\方法的方式达到监听多个属必引起的变化作出处理的功能
可以在挂载时进行一次初始化,也可以获取路由中的相关参数
ES6中的字符串模板
`<Icon type="person"></Icon> <strong>${row.name}</strong>`; //用``,可以写变量在里面,不用一个个字符串进行拼接
所有的 Vue 组件都是 Vue 实例
slot
作用是否用于将子组件包含的元素预留存放的位置,但是里面的元素是不属于子组件的,它是属于父组件的,变量和方法都是访问父组件的,受父组件所控制。
<div id="app"> <children> <span>12345</span> <!--上面这行不会显示--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //这个无返回值,不会继续派发 template: "<button>为了明确作用范围,所以使用button标签</button>" } } }); </script>
因为没有slot,所以 <span>12345</span> 是不会显示的
<div id="app"> <children> <span>12345</span> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //这个无返回值,不会继续派发 template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>" } } }); </script>
<span>12345</span> 这样就会显示出来
<div id="app"> <children> <span slot="first">12345</span> <span slot="second">56789</span> <!--上面这行不会显示--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //这个无返回值,不会继续派发 template: "<button><slot name='first'></slot>为了明确作用范围,<slot name='second'></slot>所以使用button标签</button>" } } }); </script>
加上名字就会放到对应名字的slot中
<div id="app"> <children> <span slot="first">【12345】</span> <!--上面这行不会显示--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //这个无返回值,不会继续派发 template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围,<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>" } } }); </script>
【1】name=’first’的slot标签被父组件对应的标签所替换(slot标签内部的内容被舍弃);
【2】name=’last’的slot标签,因为没有对应的内容,则显示该slot标签内部的内容。
VUE表达式,可以在标签内容上或绑定的属性上,表达式可以做到一个值的改变会引起表达式重新计算的变化,表达式可以是计算属性\方法\属性
<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">菜鸟教程</div> </div>
v-for 指令可以迭代对象,也会有index的参数传入,key参数传入
计算属性
在处理一些复杂逻辑时是很有用的。
依赖变量发生改变时,它也会更新。与表达式类似,只不过不用每次引用都写表达式
计算属性与方法都可以在标签中引用,其依懒发生改变,都会重新计算和调用
但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
重新渲染
一般情况下vue推崇的是数据驱动 也是数据更新进而使组件得以重新渲染。
监听属性,通过监听属性进行相关的逻辑处理(如改变另一个属性的值等)
如果存在依懒多个属性的话可以使用计算属性\方法的方式达到监听多个属必引起的变化作出处理的功能
可以在挂载时进行一次初始化,也可以获取路由中的相关参数
ES6中的字符串模板
`<Icon type="person"></Icon> <strong>${row.name}</strong>`; //用``,可以写变量在里面,不用一个个字符串进行拼接
- checkboxTest.zip (351.2 KB)
- 下载次数: 1
- checkboxTest.zip (351.2 KB)
- 下载次数: 2
- elementTabsComponent.zip (1.4 KB)
- 下载次数: 1
- vueTest.zip (355.8 KB)
- 下载次数: 2
发表评论
-
defineProperty Array push 监听
2020-10-31 15:16 436<!DOCTYPE html> <html ... -
vueDialogTest004(打开别的页面)
2020-03-08 11:39 442<!DOCTYPE html> <html ... -
vue 基本操作
2019-12-30 21:29 280vue 基本操作 -
vue 实现文件下载
2018-12-22 10:16 14347vue 实现文件下载 https://forum.vue ... -
Vuex store
2018-12-20 16:31 736Vuex 一个 store 有四个属性:state, ge ... -
Vue 开发总结
2018-10-15 16:53 397Vue 开发总结 Vue是一个对象(还没有实例化) ...
相关推荐
05-vuejs研究-vuejs基础-v-text指令.avi
vue面试题整理vuejs基础知识整理.pdf
这是一份非常详细的vuejs的视频教程,非常适合初学者,文档中包含链接和提取码
VueJS基础:YT Baledemy 70部分的学习框架Vue JS
添加产品应用程序-VUEJS 这是一个有关Vuejs基础的简单Vuejs项目。项目设置npm install编译和热重装以进行开发npm run dev编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vuejs基础入门PPT,非常适合初学者及有PPT制作需求的同学。
结合之前 Vuejs 基础与语法 •使用 v-model 双向绑定 input 输入内容与数据 data •使用 @click 和 methods 关联事件 •使用 v-for 进行数据循环展示 <!DOCTYPE html> <html lang=en> <head> <...
VueJS基础课程挂在那里男孩
在此,希望有一定vuejs基础和nodejs基础的同学参与进来,结合大家平时开发中遇到需求和问题,把该项目做成完全依赖前端js技术,实现简单的、易用易懂的、功能齐全的OAM管理系统。技术前提熟悉nodejs以及npm掌握掌握 ...
个人喜欢 vue.js , 跟 ng,react相比,react,要很成熟的js基础,才能驾馭,ng 对个人来说太难,ng2 走微软派,个人对微软反感。 vue.js 是个很优秀的 mvvm,对于组件的交互行为是方便又快速的。 仅对 vue.js 官网做...
很全面很全面的思维导图,包含vue基础知识,router, component, vuex, 另外使用promiss封装了rest风的网络请求,并对请求异常做了包装
在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs。对于初学者(尤其是干后端的初学者)来说,刚接触时,有好多思路都很...
本课件使用于前端零基础小白,也适用于其他想要掌握vuejs框架使用的开发人员。通过学习本课件ppt,你能在短时间内对vuejs框架有全新的认识。对于前端开发来说,掌握vuejs的使用,已经是该行业默认的基本要求。本课件...
【资源介绍】 毕业设计-基于spring-boot+vuejs+element-ui的新闻发布管理系统源码.zip毕业设计-基于...基础能力强的可以在此基础上修改调整,以实现不同的功能。 欢迎下载,欢迎沟通,互相学习,共同进步!提供答疑!
vuejs+django2.0前后端分离项目,适用于全栈开发。需要有一定的前端基础,前端框架用的是vuejs,后端用的是django写的api。可以在这个项目的基础上进行二次开发
学习前提:需要具备一定的HTML、CSS、JavaScript基础 3.Vue.js安装 (1)直接CDN引入 (2)下载和引入 开发环境:https://vuejs.org/js/vue.js 生产环境:https//vuejs.org/js/vue.min.js 第一步:浏览器输入:...
Spring-Security-VueJs的基础经过身份验证的后端: 保持哈希映射登录会话,直到执行注销。 它具有端点/ user以返回用户和角色上下文。 POST,PUT和DELETE动词有效。 ->审阅:通过表单登录时,它不会生成SessionId。...