一、学习vuejs的目的
1.原有项目使用vue进行重构
2.使用vue的技术栈
3.前端必备技能
二、vuejs
- vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
- 或者如果你希望将更多的业务逻辑使用vue实现，那么vue的核心库及其生态系统
- 比如core+Vue-riuter+Vuex，也可以满足你各式各样的需求
- vue有很多特点和web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
三、安装vue
1.CDN安装
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>
2.直接下载安装
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
https://cn.vuejs.org/v2/guide/installation.html
3.NPM安装
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
四、第一个vue代码
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{author}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let(定义变量) const（定义常量）
//编程范式：声明式编程
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data:{//定义数据
message: '你好啊，李银河',
author: '王小波'
}
})
</script>
</body>
代码做了什么事情？
创建了一个vue对象
- 创建vue对象时，传入了一些options:{}
- {}中包含了el属性：该属性决定了这个vue对象挂载到哪一个元素上，这里挂载到了id为app的元素上
- {}中包含了data属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的，比如像上面这样
- 也可能是来自网络，从服务器加载的
- 浏览器执行代买的流程
- 执行到10-13行代码显示出对应的html
- 执行第19行代码创建vue实例，并且对原Html进行解析和修改 - 并且，目前我们的代码是可以做到响应式的
五、vue列表显示
<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: ['spider', 'x man', '大话西游', '功夫']
}
})
</script>
</body>
- 数据列表
- 现在从服务器请求过来一个列表】
- 希望展示到HTML中
- HTML代码中，使用v-for指令
- 不需要在JavaScript代码中完成DOM的拼接相关操作了
- 更重要的是，它是响应式的
- 也就是说，当我们数组中的数据发生改变时，界面会自动改变
- 依然让我们打开开发者模式的console，来试一下
app.movies.push('逃学威龙')
六、案例：计数器
<body>
<script src="../js/vue.js"></script>
<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>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add: function(){
console.log('add被执行');
this.counter++
},
sub: function(){
console.log('sun被执行');
this.counter--
}
}
})
</script>
</body>
- 现在，我们来实现一个小的计数器
- 点击+ 计数器+1
- 点击-计数器-1
- 这里，我们又要使用新的指令和属性了
- 新的属性：methods，该属性用于在vue对象中定义的方法
- 新的指令：v-on:click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中的方法）
- @click是v-on:click的语法糖，简写
