Vue.js安装
使用一个框架,我们第一步要做什么呢?安装下载它
安装Vue的方式有很多:
方式一:直接CDN引入
你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
~
方式二:下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
~
方式三:NPM安装
后续通过webpack和CLI的使用,我们使用该方式。
vue初体验
01-Hello Vue
我们来做我们的第一个Vue程序,体验一下Vue的响应式
代码做了什么事情?
我们来阅读JavaScript代码,会发现创建了一个Vue对象。
(1)创建Vue对象的时候,传入了一些options:{}
(2){}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
(3){}中包含了data属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如像上面这样。
也可能是来自网络,从服务器加载的。
(4)浏览器执行代码的流程:
执行到10~13行代码显然出对应的HTML。
执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。
并且,目前我们的代码是可以做到响应式的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
// let(变量)、const(常量)
// 编程范式: 声明式编程 【范式:方式】
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: '你好啊,李银河!',
name: 'coderwhy'
}
})
// 元素js的做法(编程范式: 命令式编程,第一、二、三步怎么做)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
// 4.修改message的数据: 今天天气不错!
// 5.将修改后的数据再次替换到div元素
</script>
</body>
</html>
02-vue列表展示
现在,我们来展示一个更加复杂的数据:数据列表。
比如我们现在从服务器请求过来一个列表
希望展示到HTML中。
HTML代码中,使用v-for指令
该指令我们后面会详细讲解,这里先学会使用。
是不是变得So Easy,我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且,更重要的是,它还是响应式的。
也就是说,当我们数组中的数据发生改变时,界面会自动改变。
依然让我们打开开发者模式的console,来试一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
</body>
</html>
计数器
现在,我们来实现一个小的计数器
点击 + 计数器+1
点击 - 计数器 -1
这里,我们又要使用新的指令和属性了
新的属性:methods,该属性用于在Vue对象中定义方法。
新的指令:@click, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)
你可能会疑惑?
这些@click是什么东西?
Vue对象中又是定义el/data/methods,到底都有哪些东西可以定义,以及它们的作用是什么?
这些疑惑在后续学习中都会一一解开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数: {{counter}}</h2>
<!--<button v-on:click="counter++">+</button>-->
<!--<button v-on:click="counter--;">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
<!--下面是语法糖写法-->
<!--<button @click="sub">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
// 语法糖: 简写
// proxy
const obj = {
counter: 0,
message: 'abc'
}
new Vue()
const app = new Vue({
el: '#app',
data: obj,
methods: {
add: function () {
console.log('add被执行');
this.counter++
},
sub: function () {
console.log('sub被执行');
this.counter--
}
},
beforeCreate: function () {
},
created: function () {
console.log('created');
},
mounted: function () {
console.log('mounted');
}
})
// 1.拿button元素
// 2.添加监听事件
</script>
</body>
</html>