vue.js
cygodwg
663207134562
展开
-
vue之hello world
<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }});结果显示:Hello Vue 可以看出数据被渲染入页面,vue.js核心就是能够动态渲染数据的系统,我们客户尝试修改app.message的...原创 2018-06-22 16:35:25 · 174 阅读 · 0 评论 -
vue.js的条件和循环
vue工具也有自己的if,else,下面是使用例子<div id="app-3"> <p v-if="seen">当seen=true能看到我,seen=false看不到我</p></div>var app = new Vue({ el: '#app-3', data: { seen: true }})当seen为true...原创 2018-06-22 17:32:36 · 263 阅读 · 0 评论 -
vue的事件处理
vue不仅提供给我们数据绑定的功能,还让我们能够有可以处理事件的事件监听器。下面是例子 <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button></div>var app原创 2018-06-22 17:55:31 · 145 阅读 · 0 评论 -
vue的双向数据绑定
v-model:可轻松实现表单输入和应用状态之间的双向数据绑定<div id="app-6"> <p>{{ message }}</p> <input v-model="message"></div>var app6 = new Vue({ el: '#app-6', data: { message:原创 2018-06-22 18:01:16 · 118 阅读 · 0 评论 -
vue组件化实现
vue允许使用小型、独立和可复用的组建构建大型的应用。vue一个组件本质上就是一个预定义的vue实例。<body><div id="app"> <ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol><原创 2018-06-22 23:55:03 · 262 阅读 · 0 评论 -
vue生命周期
每个vue在被创建的时候需要经过一系列的初始化过程-例如,设置数据监听、编译模板、实挂载到dom,数据变化更新dom,处于生命周期不同阶段运行生命周期钩子函数,也给我们添加自己代码的口子。new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: '...转载 2018-06-23 00:24:58 · 87 阅读 · 0 评论 -
vue模板语法及操作
vue使用了基于html的模板语法,所有的vue.js的模板语法是合法的html。1、文本 使用了{{}}双大括号的形式<span>Message: {{ msg }}</span> {{msg}}会被替代为对应数据对象上的msg属性的值,并在绑定数据对象的msg发生改变,内容也会随之变化。 使用v-once指令,执行一次插值,之后不会变化。 <...原创 2018-06-23 01:00:30 · 312 阅读 · 0 评论 -
vue的计算属性与监听器
vue模板表达式里面是支持使用js表达式的,例如下面<div id="example"> {{ message.split('').reverse().join('') }}</div>但如果这样使用了,模板不在是简单的声明式逻辑,阅读起来不在变得愉悦,我们要分析一下才能知道上面表的是将message反转。 我们要降低模板的复杂性,所有的需要复杂表达式的地方需要...原创 2018-06-23 17:09:51 · 399 阅读 · 0 评论 -
vue class与style绑定
vue针对class和style的处理做了增强处理,表达式结果除了字符串还可以是对象或者数组。绑定html class<div id="app"> <div v-bind:class="{active: isActive}">active</div></div><script src="https://cdn.jsdelivr.n原创 2018-06-23 22:21:03 · 284 阅读 · 0 评论