Vue.js入门(一)插值操作&&绑定属性
Vue.js(一)
准备知识
什么是vue?
| vue.js是前段主流框架之一(还有Angular.js React.js)
|一套构造用户界面的框架,只关注视图层,主要和界面打交道,便于与第三方库或既有的项目整合(vue有配套的第三方库)
框架和库的区别
| 框架:完整的解决方案, 只需要使用框架提供的类或函数,即可实现全部功能 ,对项目的入侵性很大,中途不能轻易更换框架否则需要重新架构整个项目
| 库:提供某一个小功能, 库为我们提供了很多封装好的函数,我们就取所需的某部分,其他没有用上的我们自己来实现 ,对项目的入侵性小,如果某个库无法完成某些需求,可以切换到其他库
MVVM
| MVVM前端的分层开发思想,把每个页面分成了M,V,VM;VM是MVVM核心(VM是M和V之间的调度者)
|M: 数据模型 。保存每个页面单独的数据
|VM: 修改数据 & 自动渲染 。对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型 ( 包括视图的状态和行为),而 Model 层的数据模型是只包含状态的。比如页面的这一块展示什么,那一块展示什么 => 视图状态(展示),而页面加载进来时发生什么,点击这一块发生什么 =>视图行为(交互)。
|V: 带特殊属性的 html 模板 ,里面可以嵌入一些js模板的代码,比如Mustache
vue和MVVM的例子
<!--Vue 的 View 模板--> <div id="app"> <p>{{message}}</p> <button v-on:click="showMessage()">Click me</button> </div>
//Vue 的 ViewModel 层(伪代码) var app = new Vue({ el: '#app', data: { // 用于描述视图状态(有基于 Model 层数据定义的,也有纯前端定义) message: 'Hello Vue!', // 纯前端定义 server: {}, // 存放基于 Model 层数据的二次封装数据 }, methods: { // 用于描述视图行为(完全前端定义) showMessage(){ let vm = this; alert(vm.message); } }, created(){ let vm = this; // Ajax 获取 Model 层的数据 ajax({ url: '/your/server/data/api', success(res){ // TODO 对获取到的 Model 数据进行转换处理,做二次封装 vm.server = res; } }); } })
//服务端的Model层 { "url": "/your/server/data/api", "res": { "success": true, "name": "IoveC", "domain": "www.cnblogs.com" } }
插值操作
Mustache
将data中的数据插入到html中 {{ }}语法
v-cloak
v-cloak 指令设置样式,会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。如果当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码 => 使用 v-cloak 来解决这一问题
<div id="app"> <h2 v-cloak>{{message}}</h2> </div> <style> [v-cloak]{ display:none } </style> <script src="../js/vue.js"></script> <script> // 在vue解析之前, h2中有一个属性v-cloak // 在vue解析之后, h2中没有一个属性v-cloak var app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script>
v-test
|通常情况下,v-test接收一个string类型
|不会因网速问题显示插值表达式(vue的源代码)
|会覆盖元素中原本的内容
<h2 v-test = "message"></h2> <h2 v-test = "message">==123</h2> <!-- v-test只会显示massage的内容,不会显示"==123" ;而<h2 v-cloak>+++{{message}}+++</h2>会显示message两边的+号 -->
v-html
|可以解析html标签并且进行渲染
<div v-html="message"></div> <script src="../js/vue.js"></script> <script> var app = new Vue({ data: { message: '<h1>我是一个h1标签</h1>' } }) </script>
v-once
|该指令后面不需要跟任何的表达式
|限制元素和组件只会渲染一次,不会随着数据的改变而改变
<div id="app"> <p v-once>{{msg}}</p> <!-- //msg不会改变 --> <p>{{msg}}</p> <p> <input type="text" v-model = "msg"> </p> </div> <!--当修改input框的值时,使用了v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的-->
v-pre
|跳过这个元素和他子元素的编译过程,显示原本的Mustache语法
<div id = "app"> <p>{{message}}</p> <p v-pre>{{message}}</p> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el:'#app' data: { message: '<h1>我是一个h1标签</h1>' } }) </script>
绑定属性v-bind
|上面的指令主要用于动态插入内容,有时候我们也需要动态绑定a标签的href img标签的scr => v-bind
<div id = "app"> <a v-bind:href = "link">百度一下你就知道</a> <!--语法糖(简写):<img :scr = "logoUrl" alt = ""> 省略v-bind只留下冒号--> <img v-bind:scr = "logoUrl" alt = ""> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el:'#app' data: { logoUrl: link:"https://www.baidu.com/" } }) </script>
绑定class
对象语法
<ul class="box" :class="{‘textColor‘:isColor, ‘textSize‘:isSize}"> <li>学习Vue</li> </ul> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> <script> var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true } }) </script>
数组语法
语法基本同对象语法,只不过class之后跟的是一个数组
<div id="app"> <h2 class="title" :class="[active, line]">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello!', active: 'classA', line: 'classB' } }) </script>
绑定style
绑定css内联样式(驼峰式命名)
对象语法
| value可以是一个变量,来自data的属性
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> key和value都可以是一个变量--> <h2 :style="{fontSize: '50px'}">{{message}}</h2> <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2> <script src="../js/vue.js"></script> <script> var app = new Vue({ data: { message: '你好啊', finalSize: 100, finalColor: 'red', } })
数组语法
style后跟的是一个数组
<div id="app"> <h2 :style="[baseStyle, baseStyle1]"></h2> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { baseStyle: {backgroundColor: 'red'}, baseStyle1: {fontSize: '100px'}, } }) </script>
- Vue.js双向绑定操作技巧(初级入门)
- 【vuejs路由】vuejs 路由基础入门实战操作详细指南
- vue.js 一个问题, 如果属性为null时,容易影响第二次绑定无法刷新。
- Vue.js 属性绑定 v-bind
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- Vue入门---属性、style和class绑定方法
- 学习vue.js表单控件绑定操作
- Vue.js笔记-计算属性 class与style绑定
- Vue.js入门学习--表单input的绑定(六)
- 解决Vue.js 2.0 有时双向绑定img src属性失败的问题
- Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)
- Vue.js学习笔记:属性绑定 v-bind
- js中的访问器属性 defineProperty(vue双向绑定的原理)
- Vue.js之Vue计算属性、侦听器、样式绑定
- vue.js入门教程之绑定class和style样式
- Vue.js之Vue计算属性、侦听器、样式绑定
- Ember.js 入门指南——handlebars属性绑定
- Vue.js总结学习(指令、计算属性、数据绑定)
- Vue.js学习笔记:v-bind属性绑定(class,src)
- vue.js入门教程之计算属性