Vue学习(一)
来源:互联网 发布:云米超能滤水壶 知乎 编辑:程序博客网 时间:2024/06/05 07:18
Vue.js是JavaScript的MVVM(Model-View-ViewModel)框架,像这样的框架还有AngularJs,为什么叫MVVM框架,因为数据和模型任意一方改变,另一方也随之改变。是同步的。Vue的核心只关注视图层。
MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦绑定,视图和数据就保持同步。每当数据发生改变,视图也发生改变。反之亦然。
ViewModel是Vue的核心,它是Vue的一个实例。Vue实例作用某个HTML上元素上,这个HTML可以是body,也可以是某个id所指的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听视图层中DOM的变化,当发生变化时,Model层的数据随之改变。DOM DataBindings监听Model层的数据,当数据发生改变时,View层的DOM也随之改变。这也是数据双向绑定的特点。
Vue.js特点:
- 简洁:页面由HTML + JSON + Vue实例组成
- 数据驱动: 自动计算属性和追踪依赖的模板表达式
- 组件化: 可复用 解耦的组件来构建页面
- 轻量: 代码量小,不依赖其他库
- 快速: 精确有效批量DOM更新
- 模板友好: 可通过npm,bower等多种方法安装,很容易融入。
声明式的渲染
Vue.js核心是一个允许采用简洁的模板语法来声明式的将数据渲染到DOM:
问题:
1.简洁的模板是?
就是下面html部分
2.什么是声明式的?
声明式就是声明一个变量
html
<div id="app"> {{message}}</div>
js
var app = new Vue({ el: '#app', data: { message: 'Hello Vue' }})
输出结果为:
Hello Vue
我们已经生成第一个Vue应用了,看起来跟单单渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经绑在一起,所有的元素都是响应式的。我们如何知道,打开你的浏览器的控制台,并修改app.message,你将看到上例相应的更新。
这里存在一个问题:
为什么会这样写:
app.message = '好消息'
而不是这样:
app.data.message
{{ message }} 使用了"Mustache"语法(双大括号)
除了插文本的形式,我们还可以采用这样的方式绑定DOM元素属性:
html:
<div id="app"> <span v-bind:title="message">鼠标停留几秒钟可以查看到提示信息</span></div>
js:
var app = new Vue({ el: '#app', data: { message: '加载于' + new Date() }})
v-bind 属性被称为指令。
v-*代表的是Vue提供的特殊属性,v-bind此指令的作用是:将这个元素节点上的title属性和Vue实例中的message属性保持一致。
条件与循环
v-if 控制切换一个元素的显示
html
<div id="#app" v-if="seen"> {{ message }}</div>
var app = new Vue({ el: '#app', data: { message: '好消息', seen: true }})
输出结果为:
好消息
这个例子演示了我们不仅可以绑定DOM文本到数据,还可以绑定DOM结构到数据。
不太懂什么意思?
v-for 可以绑定一个数组的数据来渲染到列表中
html
<div id="app"> <ul> <li v-for="item in arr"> {{ item.text }} </li> </ul></div>
js
var app = new Vue({ el: '#app', data: { arr: [ { text: '天下' }, { text: '天下的宝宝' }, { text: '宝宝的天下' } ] }})
在控制台里,输入
app.arr.push({ name: '宝贝' })
你会发现列表中新增了一项
处理用户输入
为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法:
html
<div id="app"> <p>{{ message }}</p> <button v-on:click="reveserMessage">逆转消息</button></div>
js
var app = new Vue({ el: "#app", data: { message: 'Hello World!' }, methods: { reveserMessage: function(){ this.message = this.message.split('').reveser().join(''); } }})
问题:
1.this指的是什么
指的是vue实例。
Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}
2.split()是分割字符串,那么join()是什么呢?
join()方法用于把数组中所有元素放入一个字符串中。元素是通过指定的字符串分割的。
前者是字符串的方法,后者是数组的方法。
<script type="text/javascript"> var arr = 'I love you'; console.log(arr.split('')); //["I"," ","l","o","v","e","y","o","u"] console.log(arr.split('').join()); //I,l,o,v,e,y,o,u console.log(arr.split('').join('')); //I love you</script>
join(separator)可选 指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
- Vue学习(一)
- vue学习(一)
- Vue学习(一)
- Vue学习笔记(一)
- vue.js学习(一)
- Vue入门学习(一)
- Vue 学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- (一)VUE学习地址
- vue学习笔记(一)
- Vue入门学习(一)
- Vue学习总结(一)
- vue-router学习(一)
- vue学习之路(一)--vue-cli安装+vue-router+vue-resource
- vue学习(一) vue指令和过滤器
- vue学习之路 一 (初期搭建vue项目)
- Vue 2.0 vue-router基础学习(一)
- DTW动态规划调整
- 《优秀到不能被忽略》
- 222
- javac编译原理
- swift3.0 从c语言字符串转换到swift 字符串
- Vue学习(一)
- DataBinding使用教程(二):xml标签详解
- javaWeb 简单注册登录(含数据库连接) -- (三) 实现用户注册请求的响应
- geometry-api-java 学习笔记(二)点 Point
- 五.python requests ip伪装,cookie登陆获取,利用cookie进行登陆
- CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
- 多数据更新冲突处理机制
- 2.8 Git Basics
- SVD的威力