Vue使用指南(一)

时间：2021-10-17 05:17:25

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('该时间点需要完成的业务逻辑'); }, });

 

 

 

标签：

相关文章