![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
zhyingke
我想看日落,不想看星空
展开
-
Vue:入门4(Class 与 Style 绑定 )
绑定 HTML Class 1.对象语法 <!--如果isActive true则返回active会显示 class=active,false则不会有这个class--> <div id="id1" v-bind:class="{ active: isActive }">1.对象语法</div> <script> var vm1 = new ...原创 2019-08-02 16:04:27 · 139 阅读 · 0 评论 -
Vue:入门1 创建一个 Vue 实例
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。 ###加载JS文件(所有的案例都是在加载了这个文件的基础下进行的) <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">...原创 2019-08-01 09:18:07 · 429 阅读 · 0 评论 -
Vue:入门5(条件渲染)
Vue:入门5(条件渲染) 条件语句,v-else非必须 <div id="id1"> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no原创 2019-08-05 16:55:16 · 105 阅读 · 0 评论 -
Vue:入门2(模板语法)
案例1 v-once 指令 <!-- v-once 指令,当数据改变的时候msg的内容不会改变 最简单的是就是在浏览器的console栏修改vm.msg='1111'。会发现页面值不会改变. 但是你通过console.log(vm.msg)值已经变成1111 --> <span id = 'id1' v-once>这个将不会改变: {{msg}}</span> ...原创 2019-08-01 15:25:56 · 117 阅读 · 0 评论 -
Vue:入门6(列表渲染 )
列表渲染 for循环(数组)。可以用 of 替代 in 作为分隔符 <ul id="id1"> <li v-for="item in items"> {{item.data}} </li> </ul> <script> var vm1 = new Vue({ el:'#id1', da...原创 2019-08-06 16:04:07 · 131 阅读 · 0 评论 -
Vue:入门9(组件基础)
component创建的组件可以当作自定义元素使用,并且有组件的相应功能 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项, 例如 data、computed、watch、methods 以及生命周期钩子等。 仅有的例外是像 el 这样根实例特有的选项。 组件的data必须是一个函数,这样写。所有组件都是互不影响的 </div> <div id="...原创 2019-08-08 17:15:14 · 217 阅读 · 0 评论 -
Vue:入门3(计算属性和侦听器)
计算属性:不建议在{{}}中做过多的逻辑 方法1:使用计算属性 <!-- 下面的例子结果是: Original message: "Goodbye" Computed reversed message: "eybdooG" --> <div id="example"> <p>Original message: "{{ message }}"</p&...原创 2019-08-02 14:33:56 · 159 阅读 · 0 评论 -
Vue:入门7(事件处理 )
事件处理 监听事件 通过v-on进行绑定事件。下面的结果是点一按钮,数字显示+1,从0开始 <div id="id1"> <button v-on:click="counter += 1">add 1</button> <p>times:{{counter}}</p> </div> <script> ...原创 2019-08-07 15:52:13 · 116 阅读 · 0 评论 -
Vue:入门8(表单输入绑定 )
基础用法 <!-- v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。 你应该通过 JavaScript 在组件的 data 选项中声明初始值。 在文本区域插...原创 2019-08-07 15:54:43 · 248 阅读 · 0 评论