![](https://img-blog.csdnimg.cn/20190731173353602.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js学习
根据官方文档,一步步学习Vue.js . 文章案例多来自官方文档,加上自己学习过程中的理解,比官方文档更加详细
zhyingke
我想看日落,不想看星空
展开
-
Vue:入门9(组件基础)
component创建的组件可以当作自定义元素使用,并且有组件的相应功能因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件的data必须是一个函数,这样写。所有组件都是互不影响的</div><div id="...原创 2019-08-08 17:15:14 · 220 阅读 · 0 评论 -
Vue:入门8(表单输入绑定 )
基础用法<!--v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。在文本区域插...原创 2019-08-07 15:54:43 · 251 阅读 · 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 · 122 阅读 · 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 · 139 阅读 · 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 · 113 阅读 · 0 评论 -
Vue:入门4(Class 与 Style 绑定 )
绑定 HTML Class1.对象语法<!--如果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 · 152 阅读 · 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 · 165 阅读 · 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 · 124 阅读 · 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 · 436 阅读 · 0 评论