一、什么是Vue
Vue.js是一个渐进式 JavaScript 框架
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
为什么要学习Vue
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发特点
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM如何使用Vue
- 开发版本：vue.js
- 生产版本：vue.min.js
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>使用vue</title>
</head>
<body><div id="box1">{{ }}</div><hr><div class="box2">{{ }}</div>
</body>
<script src="js/vue.js"></script>
<script>/* 拿到jquery框架的对象 ($ | jQuery) ===> 使用jquery框架拿到vue框架的对象 ( new Vue() ) ===> 使用vue框架*/// vue对象需要手动创建, 原因是一个vue对象可以只控制页面中的某一部分, 如果一个页面有多个部分都需要被控制, 那么就需要创建多个vue对象/*vue对象如何与控制的页面进行绑定关联采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)*/new Vue({el: "#box1"// 挂载在id为box1的div上, 那么该div下的所有内容都由该vue对象来控制});new Vue({el: '.box2'// 挂载在class为box2的div上, 那么该div下的所有内容都由该vue对象来控制 (尽量使用id, 唯一标识)})
</script>
</html>Vue的挂载点（vue实例）
<body><div id="app">{{ msg }}</div>
</body>
<script src="js/vue.js"></script>
<script>// Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)var app = new Vue({el: '#app',data: {msg: "开启vue学习之路"}});// 如果需要使用vue对象(实例), 那么就可以接受Vue创建的结果, 反之就不需要接收console.log(app);console.log(app.$attrs); // vue实例的变量都是以$开头console.log(app.$el);console.log(app.$data.msg);console.log(app.msg);// app对象 = new Vue()实例 = 标签div#app组件</script>vue的基础指令
- 文本指令
<body><div id="app"><p>{{ info }}</p><!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 --><p v-text="info"></p><p v-text="msg"></p><p v-html="res"></p></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {info: "插值表达式",msg: "文本指令",res: "<b>加粗的文本</b>"}})
</script>- 属性指令
<body><div id="app"><!-- v-bind:属性 = "变量" --><!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 --><!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)--><p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p><!--最常用的两个属性 class | style--><!--class--><p :class="a"></p> <!-- 单类名 --> <p :class="[a, b]"></p> <!-- 多类名 --><p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 --><!--style--><p :style="s1"></p> <!-- s1为一套样式 --> <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> </div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {h_info: "悬浮提示",hehe: "呵呵",a: 'active',b: 'rule',d: false,s1: { // 样式1: 值1, ..., 样式n: 值nwidth: '200px',height: '200px',background: 'red'},s2: {borderRadius: '50%'},ta: 'center'}})
</script>- 事件指令
<body><div id="app"><!-- v-on:事件 = "变量 简写 @ --><!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 --><p v-on:click="fn1">11111111111111</p><p @click="fn2">22222222222222</p><!--vue事件的绑定可以传自定义参数--><p @click="fn3(333)">3333333333333333</p><!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了--><p @click="fn4">4444444444444444</p><!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event--><p @click="fn5(555, $event)">5555555555555555</p></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {// 事件在data中提供一个函数地址,可以实现事件fn1: function () {console.log("11111111111111")}},// 事件尽量(要求)都放在vue实例的methods中methods: {fn2: function () {console.log("22222222222222")},fn3 (arg) { // ES6语法console.log(arg)},fn4: function (ev) {console.log(ev)},fn5: function (arg, ev) {console.log(arg)console.log(ev)},}})
</script>- 表单指令
<body><div id="app"><!-- v-model = "变量" 本质操作的就是表单元素的value --><!--v-model就是完成数据的双向绑定--><form action=""><input type="text" v-model="info"> <!-- info变量就是代表输入框的value --><input type="text" v-model="info"></form><p> {{ info }} </p><!--v-once只会被赋值一次,就不再改变,并且要结合插值表达式使用--><p v-once="info">{{ info }}</p></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {// info: "初始value",info: ""},})
</script>
