vue
Vue学习笔记
苏曼SUMAN
这个作者很懒,什么都没留下…
展开
-
1.Vue入门基础学习笔记-hello world
开始自己的第一个Vue应用原创 2017-07-12 17:36:14 · 273 阅读 · 0 评论 -
6.vue入门基础学习笔记-逻辑控制指令介绍
1 v-if如果为true标签输出 否则标签不输出,不输出的意思是标签都不会在dom文档中存在 下面的代码其实就是 if else if else 太简单 不做介绍了<h1 v-if="suman">suman</h1><h1 v-else-if="sumomo">sumomo</h1><h1 v-else="liuxiao">liuxiao</h1>2 v-show如果表达式为true标原创 2017-07-22 15:20:38 · 276 阅读 · 0 评论 -
5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
v-text指令v-text是{{ Mustache }}插值的替代,用来更新textContent,因为没有编译完成的时候页面上会显示{{ Mustache }}表达式的内容,显得界面比较乱,用v-text指令可以解决这个问题,如果要更新部分的内容还是需要用{{ Mustache }}<div id="app"> <div v-text="url"></div> <div>{{ur原创 2017-07-21 17:58:11 · 304 阅读 · 0 评论 -
5.4.vue入门基础学习笔记-基础指令介绍(事件绑定v-on)
事件绑定v-on1绑定代码段<div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div><script> var example1 = new Vue({ el: '#example-1',原创 2017-07-21 15:11:52 · 378 阅读 · 0 评论 -
5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
属性绑定v-bind1绑定普通属性1.<a v-bind:href="url">百度一下</a>2.<a :href="url">百度一下</a>3.<a href="{{url}}">百度一下</a> <!--错误写法 无效-->4.<button :disabled="someDynamicCondition">百度一下</button>5.<a :href="url" :title="原创 2017-07-21 15:02:20 · 267 阅读 · 0 评论 -
5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)
表单绑定v-model1v-model简介<div id="app"> <p>{{ message }}</p> <input v-model="message"></div>new Vue({ el: '#app', data: { message: 'hello world!' }})在这段代码中,如果修改vue.message的值,那么p标签里的值和文本框中的原创 2017-07-21 14:57:12 · 324 阅读 · 0 评论 -
5.1.vue入门基础学习笔记-基础指令介绍(表达式)
表达式每个绑定都只能包含单个表达式,可以是一串的方法计算,可以是三元表达式 除了v-for指令外其他指令均可以使用表达式有效表达式:<!-- 字符串不可变 -->{{* message }}<!-- 字符串连接 -->{{ message + '官网地址:www.csdn.com' }}<!-- 字符串反转 -->{{ message.split('').reverse().join原创 2017-07-17 16:50:28 · 169 阅读 · 0 评论 -
4.vue入门基础学习笔记-观察者watch
为一个属性(data或computed)定义watch方法,当其值发生变化时会调用该方法,定义方法如下: 该例子来自vue官方教程<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p></div>var watchE原创 2017-07-14 17:10:55 · 220 阅读 · 0 评论 -
3.vue入门基础学习笔记-计算属性computed
计算属性介绍表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。computed原理介绍computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage原创 2017-07-14 17:03:41 · 243 阅读 · 0 评论 -
2.vue入门基础学习笔记-过滤器
过滤器介绍过滤器用于用作一些常见的文本格式化,支持自定义过滤器,过滤器支持参数传递仅mustache 插值和 v-bind 指令可以使用过滤器过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符链接: {{表达式|过滤器1|过滤器2|过滤器3}}简单过滤器例子<!DOCTYPE html><html><head><meta charset="utf-8"><titl原创 2017-07-14 16:09:31 · 181 阅读 · 0 评论 -
0.Vue简介及安装
1. vue特点2. vue安装2.1 直接引入在官网下载js包,然后放入项目内引用 网址 https://cn.vuejs.org/v2/guide/installation.html 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。 重要提示: 在开发时请用开发版本,遇到常见错误它会给出友好的警告。 开发环境不要用最小压缩版,不然就失去了错原创 2017-07-14 10:42:32 · 226 阅读 · 0 评论 -
7.vue入门基础学习笔记-视图更新执行顺序
在前面的帖子中我们讲到了属性data,计算属性computed,观察者watch,及dom相关的一些指令如v-if,v-html等 那当一个data或者computed的值发生变化到视图更新,是怎样的一个流程呢?<div id="app"> {{name}} <ul> <li v-for="item in allNames">{{item}}</li>原创 2017-07-22 16:16:31 · 672 阅读 · 0 评论