vue
关注
分享
扫一扫
菜鸟_zhengke
这个作者很懒，什么都没留下…
展开
-
前端vue学习曲线（1）vue-cli（2.0）构建项目
1.安装node.js环境http://nodejs.cn/download/2.检测是否成功安装（node -v 和 npm -v）Node.js command prompt输入 node -v 和 npm -v查看安装版本3.安装国内镜像（npm install -g cnpm --registry=https://registry.npm.taobao.org）...原创 2019-07-29 14:36:23 · 200 阅读 · 0 评论 -
前端vue学习曲线（14）生命钩子
例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/n...原创 2019-08-07 15:30:32 · 187 阅读 · 0 评论 -
前端vue学习曲线（13）组件
1.定义组件// 定义一个名为 button-counter 的新组件 Vue.component("button-counter", { data() { return { count: 0 } }, template: '<button @click="count++">You clicked me {{ count }} times.<...原创 2019-08-07 15:13:00 · 400 阅读 · 0 评论 -
前端vue学习曲线（12）表单输入绑定
1.文本内容<input v-model="message1" placeholder="#文本" /><p>#文本内容：{{message1}}</p>2.多行文本内容<textarea v-model="message2" placeholder="#多行文本"></textarea><p style="wh...原创 2019-08-07 14:45:21 · 239 阅读 · 0 评论 -
前端vue学习曲线（11）事件处理
例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...原创 2019-08-07 13:55:25 · 158 阅读 · 0 评论 -
前端vue学习曲线（10）列表渲染
v-forv-for=“别名 in 源数据数组”索引：第二个参数，即当前项的索引例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdeliv...原创 2019-08-06 14:07:48 · 177 阅读 · 0 评论 -
前端vue学习曲线（9）条件渲染
1.v-if2.v-else<div id="app1"> <h1 v-if='ok'>v-if</h1> //if <h1 v-else>v-else</h1> //else</div>var app1 = new Vue({ el: "#app1", data: {...原创 2019-08-06 09:51:22 · 274 阅读 · 0 评论 -
前端vue学习曲线（8）class与style绑定
1.内联语法<div id="app1" class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>var app1 = new Vue({ el: "#app1", data: { isActive: true, hasError: false ...原创 2019-08-06 08:59:13 · 185 阅读 · 0 评论 -
前端vue学习曲线（7）侦听器
侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...原创 2019-08-06 08:59:03 · 146 阅读 · 0 评论 -
前端vue学习曲线（6）计算属性
计算属性由来：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> 1{{ message.split('').reverse().join('') }} 2{{ message.split('').reverse().join('') }}</div&...原创 2019-08-06 08:58:43 · 281 阅读 · 0 评论 -
前端vue学习曲线（5）缩写
缩写1.v-bind 缩写<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>2.v-on 缩写<!-- 完整语法 --><a v-on:click="doSomething">......原创 2019-08-06 08:58:21 · 113 阅读 · 0 评论 -
前端vue学习曲线（4）指令
指令1.参数一些指令能够接收一个“参数”，在指令名称之后以冒号表示。<div id="app1"> <p v-if="seen">v-if指令：现在可以看到我了</p> <h4>#参数</h4> <a v-bind:href="url"> v-bind:href </a> <...原创 2019-08-06 08:58:05 · 228 阅读 · 0 评论 -
前端vue学习曲线（3）插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值1.文本<p>#文本:{{msg}}</p>2.原始文本<p v-html="msg"></p>3.标签属性<!--Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：--><butt...原创 2019-08-06 08:57:32 · 197 阅读 · 0 评论 -
前端vue学习曲线（2）例子入门
1.引入<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.创建vue对象var app = new Vue({ el: '#app', data: { mes...原创 2019-08-05 14:00:22 · 549 阅读 · 0 评论 -
前端vue学习曲线（15）vue-cli（3.0）构建项目
vue-cli2.0更换vue-cli3.01.卸载cnpm uninstall -g vue-cli （卸载cli2.0）2.安装cnpm install -g @vue/cli （安装cli3.0）//暴力全卸载npm uninstall -g vuenpm uninstall -g vue-clinpm uninstall -g @vue/clinpm cache...原创 2019-08-16 14:30:49 · 195 阅读 · 0 评论