vue.js 数组里面有对象_notes01认识Vuejs

点击二白夫人

不许错过我

认识Vuejs

••••

操作软件:Webstorm

插件：vue.js  //从官网下载https://cn.vuejs.org/v2/guide/installation.html

1、为什么学习Vuejs？

可能现在的公司正要将原有项目使用Vue进行重构，目前Vuejs非常火。小程序亦是模仿Vue框架。

 2、认识Vuejs

官方网站：http://cn.vuejs.org

Vue是一个渐进式的框架，什么是渐进式呢？

●渐进式意味着你可将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

Vue有很多特点和web开发中常见的高级功能(不需要记住，慢慢体会)

1、 解耦视图；

2、 可复用组件；

3、 前段路由技术；

4、 状态管理；

5、 虚拟DOM

学习Vue的前提？

从零学习Vue开发，并不需要你具备其他类似于angular、react甚至jQuery的经验，但是你需要具备一定的HTML、CSS、JavaScript基础。

Vue.js安装

安装Vue的方式很多：

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

方式二：下载和引入

开发环境:https://vuejs.org/js/vue.js

生产环境：https://vuejs.org/js/vue.min.js

方式三：NPM安装(使用这种)

通过webpack和CLI(脚手架)的使用

 3、Vue初体验

/span>html>lang="en">charset="UTF-8">Title

id ="app" > {{message}}

以上代码做了什么事情？

创建了Vue对象；

创建Vue对象的时候，传入了一些options:{ }

 { }中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

{ }包含了data属性：该属性中通常会存储一些数据，里面的内容也可以来自网络

并且代码是可以做到响应式的。

响应式就是可以在浏览器页面直接改变数据的内容也就是当我们发生改变时，界面会自动改变。

 4、Vue列表显示

/span>html>lang="en">charset="UTF-8">Title

id="app"> v-for="item in movies">{{item}}

使用了v-for指令，后面详细讲解。

扫一扫

关注我们

注：图片来源网络