Vue
辰风沐阳
优秀的判断力来自经验,但经验来自于错误的判断
展开
-
Vue 创建项目及目录介绍
1. 创建项目vue create 项目名babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统转为浏览器可以认识的语言。eslintjs语法检查,代码规范**a. 不使用默认的,按键盘的上下箭头可以调整,调整到最后一个,然后回车**b. 只选中 Babel,其他不选,* 代表选中,可以通过上下箭头配合空格来调整选中状态,调整好后回车c. 让其生成 package.json 文件,然后回车d.原创 2020-08-12 21:10:24 · 1225 阅读 · 0 评论 -
node-vuecli 脚手架安装
1. vuecli 简介Vue CLI 致力于将 Vue 生态中的工具基础标准化Vue CLI 是一个基于 vue.js 进行快速开发的完整系统,是一个全局安装的 npm包,基于webpack构建,丰富的官方插件集合,集成了前端生态中最好的工具,一套完全图形化的创建和管理Vue.js项目的用户界面。2. 安装 node、配置npm国内镜像因为 vue cli 是一个npm包,所以需要安装node,因为npm是用node写的npm(node package manager)node.js 包管理原创 2020-08-10 21:13:17 · 478 阅读 · 0 评论 -
Vue组件的data必须是一个函数、单个根元素、局部组件
1.Vue组件的data必须是一个函数参考官网文档一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝<div id="app"> <my-button></my-button></div><script> Vue.component('my-button', { template: '<button @click="count++">{{ msg }} {{ count }}&l原创 2020-07-31 21:49:35 · 326 阅读 · 0 评论 -
Vue 侦听器 watch
1. 侦听器 watchVue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性当属性发生改变时,自动触发属性对应的侦听器。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。2. 基础用法当 msg 属性的值发生改变时,就会触发侦听器的执行<div id="app"> <input type="text" v-model="msg"></div><script> let vm = new Vue({原创 2020-07-20 22:41:20 · 136 阅读 · 0 评论 -
Vue 计算属性 computed
1. 模板表达式模板内的表达式非常便利,但是它们的设计初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。模板内的表达式只能完成简单的运算{{ msg.toUpperCase() }}data: { msg: 'Hello'}2. computed 计算属性计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它们才会重新求值。methods 不缓存computed 可以对属性进行更复杂的运算,将结果返回<div id="app">原创 2020-07-20 22:02:20 · 120 阅读 · 0 评论 -
Vue指令之列表渲染
1. v-for 指令简介v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in/of items 形式的语法其中 items 是源数据数组,item 是被迭代的数组元素别名支持多种数据格式:Array | Object | number | string | lterable(2.6新增)2. v-for 指令使用示例<li v-for="value in users">{{ value }}</li><l原创 2020-07-19 18:24:50 · 562 阅读 · 0 评论 -
Vue指令之条件渲染
1. v-show根据表达式的真假值,切换元素的 display CSS属性。表达式为false时,p标签被赋予 style="display:none;"<p v-show="status">123</p>data: { status: false,},2. 用于条件性的渲染一块内容表达式为false时,p标签被替换成了html注释 <!----><p v-if="status">456</p>data: { sta原创 2020-07-19 17:25:08 · 162 阅读 · 0 评论