Vue
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
使用 vue cli 重新制作一个 todolist
首先,进入工程的目录,使用命令启动该工程 npm run start / npm run dev [可以参考工程目录下的 package.json文件](其中, x.vue 文件就是一个单文件组件)下一步,更改单文件组件 x.vue. 注意,Vue语法要求,.vue文件中,<template>标签中,只能包含一个根元素。首先将template 中的结构写上:&l...原创 2018-07-29 16:40:02 · 366 阅读 · 0 评论 -
Vue 组件 一些细节点
细节点一、 组件定义的标签名与html规范的冲突vue 想给table 标签中的 tr 标签定义为一个组件,但下面这样写会不对: <div id="root"> <table> <tbody> <row></row> <row></row> &原创 2018-10-14 12:18:51 · 189 阅读 · 0 评论 -
Vue 组件 父子组件间的数据传递
首先定义一个组件(局部组件) <div id="root"> <counter></counter> <counter></counter> </div> <script> // 局部组件 var counter = { template: "&原创 2018-10-14 17:59:01 · 229 阅读 · 1 评论 -
Vue 组件参数校验与非 props 特性
组件的参数校验:父组件通过属性传递给子组件数据,子组件有权对这些数据进行约束,这就是参数校验。如下,简单的参数校验。 <div id="root"> <child content="hello world"></child> <!-- 下面会报错,因为content传递的是一个数组,参数校验不通过 --> <child :原创 2018-10-14 18:39:06 · 291 阅读 · 0 评论 -
Vue 给组件绑定原生事件
给一个组件绑定原生事件,如下方法是错误的! <div id="root"> <child @click="handleClick"></child> </div> <script> Vue.component("child",{ template: "<div&a原创 2018-10-14 21:55:26 · 713 阅读 · 0 评论 -
Vue 非父子组件间传值
非父子组件(隔多代、兄弟等)之间传值,主要有两种方式: - vuex - 发布订阅模式(在 vue 中称为总线机制)下文将介绍通过总线机制(Bus/总线/发布订阅模式/观察者模式),解决非父子组件之间的传值。 <div id="root"> <child content="Hello"></child> <child co...原创 2018-10-14 22:35:13 · 532 阅读 · 1 评论 -
Vue 中使用插槽
“插槽” 的概念还是挺重要的。在很多Vue 第三方插件 或 模块中,大量使用了插槽特性。他的使用,首先,定义一个组件:<body> <div id="root"> <child></child> </div> <script> Vue.component("child",{原创 2018-10-16 22:29:59 · 249 阅读 · 0 评论 -
Vue 中的作用域插槽
作用域插槽。首先,定义一个组件: <div id="root"> <child></child> </div> <script> Vue.component("child",{ template: '<div>child</div>' })原创 2018-10-16 22:50:40 · 875 阅读 · 0 评论 -
Vue 中的动态组件与 v-once 指令
toggle 两个组件的功能,代码如下。 <div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> &l原创 2018-10-16 23:17:35 · 237 阅读 · 0 评论 -
Vue 动画 过度效果(渐隐渐现)
首先一个toggle 效果: <div id="root"> <div v-if="show">hello world</div> <button @click="handleClick">切换</button> </div> <script&原创 2018-10-21 16:08:12 · 22689 阅读 · 2 评论 -
Vue CSS 动画 vue中使用animate.css 库
占一个坑,以后再补上。。。原创 2018-10-21 16:11:59 · 315 阅读 · 0 评论 -
vue 一个简单的项目 之零 step 1
在码云上 新建一个 private 的项目,拷贝ssh然后,本地 克隆下来 在桌面执行的上述命令,因此在桌面找到项目文件夹,打开,如下。 接下来,在这个文件夹里创建vue 项目。在项目文件夹的上一级目录上,运行 vue init webpack 项目名 【使用webpack 构建一个vue项目】 之后会提示,项目名不能有大写字母,改成小写就是了。...原创 2018-11-03 22:59:11 · 235 阅读 · 0 评论 -
vue 一个间的的项目 之零 step 2
我们打来项目文件夹 看看里面的文件package.json 文件,里面有许多依赖包,它表示在项目中会有一些第三方模块的依赖,依赖都放在这个文件中。package-lock.json 文件,包含了安装的第三方包的具体版本,保证团队编程的统一。index.html 文件,项目默认的首页模版文件。.postcssrc.js 文件,是对postcss 的配置项。.giti...原创 2018-11-03 23:31:05 · 155 阅读 · 0 评论 -
vue 一个简单的项目 之零 step 3
单文件组件与vue路由单文件组件:以.vue 结尾的文件。里面放的就是vue 的组件。单文件组件包含三块内容:<template>, <script>, <style>. 如下。 vue 路由路由的功能就是根据网址的不同,返回不同的内容给用户.即根据url 的不同,返回给用户不一样的页面。上图,<router-view/>...原创 2018-11-04 11:24:46 · 351 阅读 · 0 评论 -
vue 一个简单的项目 之零 step 4
多页应用 与 单页应用多页面应用 每次页面跳转,后端都会返回新的HTML文件。优点:首屏(首个被展示的页面)时间快SEO(搜索引擎优化)效果好。缺点:页面切换慢。单页面应用 每次页面跳转,是前端根据url 变化,进行页面的重新渲染。优点:页面切换快,缺点:首屏时间慢,SEO (因为搜索引擎只能识别HTML 中内容,不能识别JS中内容)效果差。当然vue 中提供了许多技术...原创 2018-11-04 23:10:02 · 122 阅读 · 0 评论 -
vue 一个简单的项目 之零 step 5
项目代码初始化(移动端)首先,在index.html 的meta 标签中加入三项(因为是移动端),手指缩放网页,不会放大缩小。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=原创 2018-11-08 23:09:21 · 437 阅读 · 0 评论 -
vue 中的set 方法 解决列表渲染的问题
列表渲染中,可能值变了但是页面没有响应。Vue 提供了 set 方法,解决这个问题。 var app = new Vue({ el: '#app', data:{ onelist: [{ id: "010101020304", text: "hello" },{ id: "0202020304", text: "ok"...原创 2018-10-11 15:05:44 · 708 阅读 · 0 评论 -
vue 列表渲染
数组循环 渲染v-for 命名用于列表渲染,最简单的一个例子: <div id="app"> <div v-for="(item,index) of onelist"> {{item}} ------ {{index}} </div> </div> <script> var app = new Vu原创 2018-10-11 11:18:13 · 191 阅读 · 0 评论 -
vue 条件渲染
vue 中给某个dom元素一个key值,当它准备复用该dom时,若key值不一样,便不会去复用。 在需要频繁显示隐藏 dom 时,使用v-show性能要高一些。命令: v-if 该值,决定了其所在的div是否真实地被挂载到页面之上。 <div v-if="show">{{message}}</div> </div> <script&g...原创 2018-09-24 18:48:49 · 201 阅读 · 0 评论 -
Vue cli 全局样式与局部样式
当使用 Vue cli 时,每一个组件,变成了单文件组件。在这个组件中,我们可以对它的逻辑、模版、样式进行定义,在定义样式的时候,可以分为:全局样式、局部样式。子组件文件(xxx.vue):<template> <li class="item" @click="handleDelete">{{content}}</li></template...原创 2018-07-29 17:07:28 · 6490 阅读 · 0 评论 -
Vue 入门
Vue 入门,hello world 例子:其中,head 中的 script 引入的为 vue 的源文件。<!DOCTYPE html><html><head> <title>vueTest</title> <meta charset="utf-8"> <script src="原创 2018-07-22 15:14:33 · 254 阅读 · 0 评论 -
Vue实例中的数据、事件和方法
数据 vue 插值表达式: {{变量名}} 除了插值表达式,可以改变dom之外,Vue 还提供类一些指令,操作dom. 例如:v-text(会进行一次转义,相比与v-html), v-html <!DOCTYPE html><html><head> <title>vueTest</title> <...原创 2018-07-22 15:51:33 · 550 阅读 · 0 评论 -
Vue 中属性绑定和双向数据绑定
属性绑定 Vue 属性绑定指令 v-bind:属性名=“js表达式”,其中"v-bind:" 可以简写为“:”。 例子<!DOCTYPE html><html><head> <title>属性绑定和双向数据绑定</title> <meta charset="utf-8"> &原创 2018-07-22 16:18:31 · 1008 阅读 · 0 评论 -
Vue 中的计算属性和侦听器
Vue 中的计算属性,是指某个属性是由其他属性计算而来。只有在它所依赖的属性变化后,它才会重新计算,否则它会使用缓存值。使用它,性能上会更好一点。computed:<!DOCTYPE html><html><head> <title>计算属性和侦听器</title> <meta charset="utf-8"&原创 2018-07-22 17:20:42 · 271 阅读 · 0 评论 -
Vue 常见的指令 v-if, v-show 与v-for
v-if , v-show 都是操作元素是否显示的指令,(其对应数据项的值为 true 或者 false)。但实现方法不一样,v-if 是从dom中删掉该元素(注释),而v-show是将该元素的display 属性设置为none。相比较来说,频繁操作时v-show 性能更高一些,偶尔操作时v-if更好一些。下例,显示或隐藏一个div:<!DOCTYPE html><...原创 2018-07-22 17:46:18 · 550 阅读 · 0 评论 -
vue 示例 todolist
万年不变的todolist <!DOCTYPE html><html><head> <title>todolist</title> <meta charset="utf-8"> <script src="./vue.js"></script&am原创 2018-07-22 20:49:38 · 171 阅读 · 0 评论 -
todolist 组件拆分
组件的拆分1. 定义并使用一个全局组件(任意地方都可以使用)<!DOCTYPE html><html><head> <title>todolist</title> <meta charset="utf-8"> <script src="./vue.js">原创 2018-07-22 21:12:44 · 235 阅读 · 0 评论 -
todolist 删除功能
思路: 在子组件的click 事件中,删除父组件中的list项中的某一数值。即子组件与父组件通信。此时,需要“发布订阅模式”来做这件事情。<!DOCTYPE html><html><head> <title>todolist</title> <meta charset="utf-8"> <原创 2018-07-22 22:16:48 · 822 阅读 · 0 评论 -
vue cli (脚手架) 的安装(mac)
首先,安装nodejs, 因为需要nodejs 中的npm 来下载 vue-cli官网下载nodejs, 安装好后。进入终端(mac),输入命名(安装vue-cli): sudo npm install --global vue-cli创建一个基于webpack模版的新项目(进到一个目录下): vue init webpack my-project安装依赖 ...原创 2018-07-29 15:36:26 · 1178 阅读 · 0 评论 -
vue 实例
如下代码。一个Vue 项目,是由很多组件组成的,组件是Vue的实例,因此可以理解为:一个Vue 项目,是由很多Vue 实例组成的。<!DOCTYPE html><html><head> <title>vue 实例</title> <meta charset="utf-8"> <script原创 2018-09-16 17:23:27 · 512 阅读 · 0 评论 -
Vue 实例生命周期
vue 实例生命周期钩子打开vue 官网的学习部分,可以找到vue 生命周期图示。Vue 实例生命周期函数:Vue 实例在某一个时间结点对自动执行的函数<!DOCTYPE html><html><head> <title>vue 实例生命周期函数</title> <meta charset="utf-8"&原创 2018-09-16 19:01:01 · 154 阅读 · 0 评论 -
vue 模版语法
vue 模版语法:1. 插值表达式2. v-text 指令3. v-html 指令 <div id="root"> <div>{{msg}}</div> <div v-text="msg"></div> <div v-html="msg">&原创 2018-09-16 19:14:47 · 145 阅读 · 0 评论 -
vue 计算属性的getter 与 setter
计算属性上,可以设置,set 与get:<!DOCTYPE html><html><head> <title>计算属性的 getter 与 setter</title> <meta charset="utf-8"> <script src="./vue.js">原创 2018-09-24 16:53:50 · 506 阅读 · 0 评论 -
vue 样式绑定
vue 样式的绑定可以通过 class 或者 style 属性的绑定来设置。绑定值可以是对象,也可以是数组: class 的对象绑定通过绑定class 属性即 “:class”,然后使用js对象赋给该属性一个数据。代码: class 绑定的数据叫 activated, 它的值为isActivated. 当isActivated 为true时,class 的值为 activa...原创 2018-09-24 18:18:36 · 167 阅读 · 0 评论 -
mac 给chrome 安装 vue-devtolls
首先,去GitHub 上 克隆一下。github 上地址:https://github.com/vuejs/vue-devtools克隆到本地后。进入 下载文件的vue-devtools 文件夹1. 使用命令,下载依赖: npm install2. 编译文件: npm run build3. 修改manifest.json 文件 这个文件在 vue-devtools/...原创 2018-12-04 17:10:41 · 284 阅读 · 0 评论