【vue】跟着老马学习vue-数据双向绑定

学习了node.js教程，只能说是有了一定的了解，之前也了解了webpack和es6的核心内容，也看过vue2.0的官网教程，并结合视频看过项目，但是理解和运用仍然存在很多问题，接下来的一段时间，跟着老马学习vue

学习链接：http://aicoder.com/vue/preview/all.html#1

vue最大的特点就在于它的双向绑定，是一个前端的双向绑定类的框架。

一说到vue我们就应该立刻想到以下几部分：1.数据双向绑定；2.列表渲染、条件渲染；3.事件处理；4.生命周期；5.组件化开发；6.路由；7.vuex

我们也将根据这7个部分进行学习。

1.数据双向绑定

彻底变革了之前Dom的开发方式。所谓双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化（通过文本框输入）。

绑定文本、绑定属性（简写）、显示原生html、样式绑定（绑定样式对象、绑定样式数组、内联样式绑定）、计算属性、自动响应的实现

2.列表渲染、条件渲染

v-if、v-else、v-for、Template循环渲染多标签

3.事件处理

v-on（缩写@）、添加methods属性、事件修饰符（.stop、..prevent、.capture、.self、.once）、按键修饰符（keyup.enter）

4.vue实例、生命周期

data、computed、methods、watch（deep: true）、el

开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue的全局API：Vue.nextTick、Vue.set、Vue.compile

5.组件化开发

Vue.extend、Vue.component

6.路由

1）引入vue和vue-router包

2）定义路由跳转的组件

3）定义路由规则对象（routes 、path、component）

4）创建Vue对象，并加载上面创建的路由对象（router）

5）在模板中编写路由跳转链接（使用 router-link 组件来导航、通过传入 `to` 属性指定链接）

this.$route.params.参数名

7.综合实战

vue init webpack my-project

cd my-project

npm install

npm run dev

8.Vuex

集中式存储管理应用的所有组件的状态

转载于:https://www.cnblogs.com/yujihang/p/7296170.html

【vue】跟着老马学习vue-数据双向绑定相关推荐

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue源码学习（三）——数据双向绑定
在Vue中我们经常修改数据,然后视图就直接修改了,那么这些究竟是怎么实现的呢? 其实Vue使用了E5的语法Object.defineProperty来实现的数据驱动. 那么Object.defineP ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
Vue 数据双向绑定
1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model.v-model 的学习相对简单我们可以用 v-model 指令在表单 . 及元素上创建双向数据绑定.它会根据控件类型自动 ...
vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...
vue数据双向绑定原理
vue 双向绑定原理官网–https://cn.vuejs.org/v2/guide/reactivity.html 1.vue双向数据绑定是通过数据劫持并结合发布-订阅模式的方法来实现的 ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

【vue】跟着老马学习vue-数据双向绑定

【vue】跟着老马学习vue-数据双向绑定相关推荐

最新文章

热门文章