Vue.js
YATBOTB-lHQ
Start With Your Impossible
展开
-
简单的Vue实例(一)
<script src="vue.js"></script><!-- DOM模板 view 视图层--><div id="demo"> <!-- 两个大括号 文本插值的形式 响应的数据绑定 --> {{message}}</div><scrip原创 2018-08-18 15:14:30 · 247 阅读 · 0 评论 -
单个复选框checkbox,v-model:绑定到布尔值 (十)
<script src="vue.js"></script><!-- DOM模板 view 视图层 --><div id="demo"> <input type="checkbox" id="a" v-model="checked" /> &am原创 2018-08-21 16:57:17 · 3032 阅读 · 0 评论 -
v-for~列表渲染(九)
v-for指令根据一组数组的选项列表进行渲染。需要使用 item in items 形式的特殊语法;item 表示每一项数据,items 表示存数据的数组名;<script src="vue.js"></script><!-- DOM模板 view 视图层 --><ul id="demo"> <li v-for=&qu原创 2018-08-21 16:31:58 · 267 阅读 · 0 评论 -
Vue.js 的 介绍
Vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。Vue.js是用于构建交互式的Web界面的库,它提供MVVM数据绑定和一个可组合的组件系统...原创 2018-08-17 16:17:55 · 8558 阅读 · 0 评论 -
render 函数模板(八)
render 函数去渲染模板最重要部分、创建虚拟DOM核心部分;<script src="vue.js"></script>.bg{ background:red;}<!-- DOM模板 view 视图层 --><div id="demo"></div>// Vue 实例var vm = n原创 2018-08-19 22:33:54 · 216 阅读 · 0 评论 -
字符串模板~ES6字符串拼接模板 (七)
<script src="vue.js"></script><div id="demo"></div>//单独把结构写在字符串str里:var str='<div>Hello,Vue</div>'; //以上的方式会有个弊端,就是如果换行,后台就会报错。//如果存在变量Vue,写法如原创 2018-08-19 21:12:21 · 1935 阅读 · 0 评论 -
v-html指令渲染HTML结构~DOM模板(六)
<script src="vue.js"></script><!-- DOM模板 view 视图层 --><div id="demo"> <!-- 文本插值{{}},双大括号可以渲染数据且还可以进行一些简单的运算。 如: {{1+2}} 结果为3, {{tr原创 2018-08-19 17:49:08 · 1133 阅读 · 1 评论 -
class绑定 :v-bind 指令 (五)
<script src="vue.js"></script><!-- DOM模板 view 视图层 --><div id="demo"> <span class="a" v-bind:class="{active:addClass,visited:hasError}">原创 2018-08-19 16:12:12 · 448 阅读 · 0 评论 -
双向的数据绑定 v-model (四)
指令:是一种特殊的行间自定义属性,职责就是当其表达式的值发生改变时相应的某些行为应用到DOM上。在Vue.js中,指令带有前缀是 v- 开头的,以表示它们是Vue提供的特殊特性,它们会在渲染的DOM上应用特殊的响应式行为。<script src="vue.js"></script><!-- DOM模板 view 视图层 --><div>...原创 2018-08-19 14:32:03 · 206 阅读 · 0 评论 -
声明式渲染和命令式渲染(三)
命令式渲染:实现过程按照逻辑过程写出来的。(不仅要关注结果,还有过程)例如:求数组arr中每一项的倍数,放到一个新数组里。 var arr=[1,2,3,4,5]; var newArr=[]; for(var i = 0 ; i < arr.length ; i++ ){ newArr.push(arr[i...原创 2018-08-18 21:33:20 · 1827 阅读 · 0 评论 -
指令v-on的简单应用(二)
<script src="vue.js"></script><!-- DOM模板 view 视图层 --><div id="demo"> <span v-on:click="clickHandle">{{message}}</span></div&a原创 2018-08-18 16:04:48 · 192 阅读 · 0 评论 -
控制切换一个元素是否显示,v-if,v-else,v-show。(十一)
v-if指令:根据表达式seen的值,在DOM中生成或移出元素,如果表达式seen对应的值为true,对应元素p就会插入到DOM中,反之,并不会。而含有 v-else指令 的元素 h1 则会插入到DOM中。v-else指令:必须紧跟着v-if指令后面、不可单独使用。v-show指令:根据表达式male的真假值来显示或隐藏HTML元素,切换元素的display(CSS样式);当v-show的...原创 2018-08-21 17:43:13 · 1581 阅读 · 0 评论