随笔分类 - vue
摘要：表单数据绑定1.1你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它
阅读全文
摘要：事件监听：1.1可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p>
阅读全文
摘要：列表渲染：1.我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是 数组元素迭代的别名。 1.1基本语法： <ul id="example-1"> <li v-for="item i
阅读全文
摘要：1.templet中v-if条件组1.1因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。 <template v-if="ok"
阅读全文
摘要：1.绑定html css1.1对象语法： 传给 v-bind:class 一个对象，以动态地切换 class <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值1
阅读全文
摘要：1.模板语法 1.1Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 1.2.在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数
阅读全文
摘要：1.构造器 1.1.每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： 1.2.在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 1.3.可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器 var
阅读全文
摘要：1.条件渲染1.1v-if<h1 v-if="ok">Yes</h1>1.2v-if else<h1 v-if="ok">Yes</h1><h1 v-else>No</h1><div v-if="type 'A'"> A</div><div v-else-if="type 'B'"> B</div>
阅读全文
摘要：class、style的绑定1.在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组2.绑定css2.1对象绑定2.1.1绑对象格式参数domdiv class="static" v-bind:class="{ ac
阅读全文
摘要：属性计算1.列子dom<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>vue：var vm = new
阅读全文
摘要：vue-模板1.插入值：1.1插入不变文本的指令：v-once<span v-once>This will never change: {{ msg }}</span>1.2插入html<div v-html="rawHtml"></div>1.3 v-bind指令：<button v-bind:d
阅读全文
摘要：1.构造器1.1扩展vuevar MyComponent = Vue.extend({ // 扩展选项})var myComponentInstance = new MyComponent()2.1属性和方法：代理属性：var data = { a: 1 }var vm = new Vue({ da
阅读全文
摘要：一：vue基础1.1.Vue是一套构建用户界面的渐进式框架1.2.引入vue：<script src="https://unpkg.com/vue/dist/vue.js"></script>1.3.值插入：1.3.1:插入domdom：<div id="app"> {{ message }}</d
阅读全文
浙公网安备 33010602011771号