1. Vue简介
首先，官方上对vue.js的介绍是：
Vue.js 是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计 。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.1 那么什么是vue？
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
- 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
1.2 vue的特点
- 轻量级框架，简单易学
- 简化DOM操作，提高运行效率
- 双向数据绑定、组件化、视图、数据和结构的分离
2. vue基本使用
首先，对于vue的使用需要引入vue：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.1 创建vue实例
首先说明，每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ intro.name }}</p>
<p>{{ addr[2] }}</p> //两个{{}}是vue的模板语法
</div>
<script>
new Vue({
el: '#app', //在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id
data: { //定义数据对象，data 用于定义属性，实例中有属性为：message
message: '你好!',
intro:{
name: '小红',
age: 18
},
addr:['北京','上海','广州']
}
})
</script>
</body>
</html>
这里有几个要点：
- vue的作用范围：el选项内部的元素及其内部的后代元素，对外部的元素没有作用。
- 选择器的选择：可以有其他选择器，但建议使用id类型。
- 设置的dom元素范围：双标签都可以，< html>和< body>除外。
- data中可以写复杂类型的数据。
- 渲染数据时遵循js语法。
那么vue简单的认识就到这里。
3892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
