随笔分类 - Vue2
https://cn.vuejs.org/
https://cn.vuejs.org/v2/api/
摘要：1.基本使用 <div id="components-v"> <markk></markk> <markk><button>你好</button></markk> <markk></markk> </div> <script> Vue.component('markk', { template: '
阅读全文
摘要：1.基础 （1）最基本的组件 <div id="components-v"> <redBtn></redBtn> </div> <script> Vue.component('redbtn', { template: '<button style="background-color:red;widt
阅读全文
摘要：一、基础 1.文本 <div id="vm"> <input v-model="message" /> <h1>{{message}}</h1> </div> <script> var vm = new Vue({ el: '#vm', data: { message: null } }) </sc
阅读全文
摘要：1.属性监听 v-on:click <div id="vm"> <button v-on:click="counter += 1">点击</button> <p>{{ counter }} times</p> </div> <script> var vm = new Vue({ el: '#vm',
阅读全文
摘要：一、条件渲染 1. v-if 通过表达式的真假来控制此标签是否显示 <div id="vm"> <!--awesome为真时显示此句--> <h1 v-if="awesome">Vue is awesome!</h1> <!--awesome为假时显示此句--> <h1 v-else>Oh no �
阅读全文
摘要：由于Class和Style绑定使用频繁，字符串拼接麻烦且易错。因此，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 一、Class 1.对象 （1）对象语法 <style> .active{ color:blue } .line{ text-decoration:
阅读全文
摘要：一、计算属性 1.计算属性 如果计算方式不能复用，且不好维护 <div id="example"> {{ message.split('').reverse().join('') }} </div> 所以计算方式比较复杂，或者会重复使用时，可以用计算属性 <div id="example"> <p>
阅读全文
摘要：一、插值 1.Mustache 语法 数据绑定最常见的形式。 <span>Message: {{ msg }}</span> 完整 <div id="vm">{{ msg }}</div> <script> new Vue({ el: vm, data: { msg:'hello' } }) </s
阅读全文
摘要：1.创建一个vue实例 <script> var vm = new Vue({ }) </script> 2.一般变量关联到vue实例 前提是要在vue实例创建前已经有了该变量 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ d
阅读全文
摘要：1.直接使用CDN <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="http
阅读全文
