Vue
# Vue:前台框架 # 渐进式JavaScript框架 # 渐进式:vue可以控制页面的一个局部,vue也可以控制整个页面,vue也能控制整个前端项目 # -- 根据项目需求,来决定vue控制项目的程度
使用
# 1.下载:https://vuejs.org/js/vue.min.js # 2.导入vue.js # 3.在自定义的script标签中创建vue对象 # 4.用vue对象来控制页面内容
vue的优点
''' 单页面web应用 数据驱动 数据的双向绑定 虚拟DOM '''
挂载点与数据的渲染
<body> <div id="app"> <!-- 插值表达式:插值表达式中出现的名字代表vue变量 --> <div class="root">{{ abc }}</div> <div class="main">{{ xyz }}</div> </div> </body>
<script src="js/vue.min.js"></script> <script> new Vue({ // 挂载点:vue对象通过el参数(挂载点)与页面结构建立联系,vue对象与页面控制的结构应该是一对一关系,所以挂载点选择id作为唯一标识 el: '#app', // 在挂载点插值表达式中出现的名字是变量,需要vue对象通过data提供 data: { abc: '内容', xyz: 3.14 } }) </script>
vue实例
<body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.min.js"></script> <script> // vue实例(对象) var app = new Vue({ el: '#app', data: { msg: "message" } }); </script> <script> // 如何访问 "message" console.log(app); console.log(app.$el); // vue的变量都是以$开头 console.log(app.$data.msg); // vue实例(对象)就是挂载点 // app找到new Vue()实例再找到页面结构id=app,然后直接访问实例中的变量 console.log(app.msg) </script>
实例的methods
<div id="app"> <!-- v-on来为事件绑定方法,事件用 :事件名 标注 --> <!-- 语法:v-on:事件名 = "事件变量" --> <!-- 事件变量:由vue实例的methods提供 --> <button v-on:click="btnClick">{{ msg }}</button> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: "按钮" }, methods: { btnClick: function () { alert('点击事件') } } }); </script>
案例:通过事件修改标签样式
<html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通过不同的类名控制着一套css样式 */ .btn { width: 100px; height: 40px; background: orange; } .botton { width: 200px; height: 80px; background-color: yellowgreen; } </style> </head> <body> <div id="app"> <!-- v-bind来为属性绑定变量,属性用 :属性名 标注 eg: :style :class :id --> <!-- 语法:v-bind:属性名 = "属性变量" --> <!-- 事件变量:由vue实例的data提供 --> <button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { msg: "按钮", my_style: { // background: 'transparent' }, my_cls: 'btn' }, methods: { btnClick: function () { // console.log(this.my_style.background) // this.my_style.background = 'yellow'; // 修改类名就能直接对应一套css样式 if (this.my_cls == 'btn') { this.my_cls = 'botton' } else { this.my_cls = 'btn' } } } }); </script> </html>
实例的computed
# computed功能:将function封装给一个变量,通过该变量就可以得到该function的返回值 # 应用场景:一个变量(name)依赖于 多个变量(first_name + last_name)的值
<div id="app"> <!-- v-model就是为表单元素 value属性 绑定变量 --> <p> 姓:<input type="text" placeholder="姓" v-model="first_name"> </p> <p> 名:<input type="text" placeholder="名" v-model="last_name"> </p> <p> <!-- 插值表达式中可以书写 变量表达式 --> 姓名:<span class="span">{{ name }}</span> </p> </div> <script src="js/vue.min.js"></script> <script> // vue实例(对象) var app = new Vue({ el: '#app', data: { first_name: '', last_name: '', }, computed: { name: function () { if (this.first_name == '' && this.last_name == '') { return '姓名' } return this.first_name + this.last_name } } }); </script>
实例的watch方法
# watch是用来监听变量的,当监听的变量的值一旦发生变化,就会触发监听的函数 # 应用场景:多个变量(first_name、last_name)依赖于一个变量(name)
<div id="app"> <p> 姓名:<input type="text" placeholder="姓名" v-model="name"> </p> <p>姓: {{ first_name }}</p> <p>名: {{ last_name }}</p> </div> <script> var app = new Vue({ el: '#app', data: { name: "", first_name: "姓", last_name: "名", }, watch: { name: function () { // eg: name = “张三” this.first_name = this.name[0]; // 张 this.last_name = this.name[1]; // 三 } } }); </script>
实例的delimiters
<body> <div id="main"> <!-- 查找表达式 {{ }} 符号与其他语言冲突,可以自定义表达式的符号 --> <!-- 实例的 delimiters: ['左侧符号', '右侧符号'] --> {{ msg }}{{{ msg }}}${ msg } </div> </body> <script src="js/vue.min.js"></script> <script> // vue实例(对象) new Vue({ el: '#main', data: { msg: "信息" }, // delimiters: ['{{{', '}}}'], delimiters: ['${', '}'], }); </script>
实例的生命周期钩子
# 学习目的: # 钩子:满足某种条件被(系统)调用的方法 # 在一个vue实例,从创建到销毁,整个过程中或产生一些时间节点,这些时间节点都会回调一些指定名字绑定的方法,在这些函数中去完成特点时间点的业务功能 new Vue({ el: '#app', data: { msg: "message" }, methods: { fn: function () { return '123' } }, beforeCreate: function () { console.log('实例要被创建了'); console.log(this.msg) }, created: function () { console.log('实例已经创建了'); console.log(this.msg); console.log(this.$el) }, mounted: function () { console.log('实例已经渲染到页面'); console.log(this.msg); console.log(this.$el); console.log(this.fn) }, '生命周期钩子名': function () { console.log('该时间点需要完成的业务逻辑'); }, });