Vue.js进阶之路1
【摘要】
什么是Vue.js?
vue.js是一个前端的js的渐进式框架(个人项目)
作者:尤雨溪
发布时间:2016年10月
github关注度： 136K (不代表大陆地...
什么是Vue.js?
vue.js是一个前端的js的渐进式框架(个人项目)
作者:尤雨溪
发布时间:2016年10月
github关注度： 136K (不代表大陆地区)
Vue.js的特性
1.vue.js是一个MVVM框架(由MVC架构衍生)
2.vue.js 数据也是单向的， 我们称之为， 单向数据流
3.vue.js是不兼容ie8及其以下浏览器(所以考虑低版本兼容是不存在的)
Vue.js的基本使用
1.引入Vue.js
(1).cdn
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
(2).下载本地
<script src="../../../basic-source/vue.js"></script>
(3).模块化安装
npm i vue -D/-S
cnpm i Vue
yarn add Vue
2.初始化Vue
(1).必须有一个html容器， 决定vue.js的作用范围
<div id="app"></div>
(2).初始化
new Vue(options)
* el 表示装载， 将上面id为app的模板装载在 new Vue的实例中，也确定了一个作用范围
* data 数据
- 1
- 2
注意:学习Vue即是在学习配置项 && api
(3).数据绑定（声明式渲染）
名词：
mustauch语法糖： 双大括号语法 {{}} 支持js语法
注意事项：
- 1. 模板中的 this 指的是 new Vue得到的实例 ， 在模板中 this可以省略不写
<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p> 推荐的
- 1
- 2
- 2. data选项在根实例中是对象， 除了跟实例以外是函数
- 3.如何激活浏览器中 vue detools工具(这是Vue.js特有的调试工具,在谷歌商店中安装):在服务器环境下运行文件即可激活
(4).看一个初始化好了的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> vue.js hello vue.js </title>
<script src="../../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{ this.data.msg }} -->
<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p>
</div>
<div id="content">
</div>
</body>
<script>
/*问题：vue.js是MVVM框架， 那么我们一下代码中那一部分是M , 那一部分是V ， 那一部分是VM?
M ---》 options 中 data
V ---》options 中 el(模板)
VM --> new Vue() 得到的实例， 这个实例身上有很多的属性和方法
*/
var vm = new Vue({
el: '#app', //将new Vue实例装载在 app这个div中， 规定了new Vue出来的实例的作用范围
data: {
// key：vulue
msg: 'hello vue.js'
}
})
new Vue({
el: '#content'
})
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。
原文链接：root181.blog.csdn.net/article/details/89343959
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：cloudbbs@huaweicloud.com进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
- 点赞
- 收藏
- 关注作者
评论（0）