【VUE学习】day01-vue初始、写法、常用命令、事件修饰符、双向绑定

vue初始

vue介绍

• vue是构建用户界面的渐进式框架，采用自底向上逐层应用开发
• 核心理念：数据驱动视图，组件化开发

框架和库的区别

• 框架：一套完整的解决方案，对项目的侵入性较大。如果项目需要更换框架，则需要重构项目
• 库：提供某一个功能，对项目的侵入性较小。如果某个库无法实现需要的功能，可以简单换到其他库

MVC和MVVM的区别

• MVC是后端分层开发的概念
  • V：view 视图层。作用：发送数据，展示数据
  • C：controller 调度层。作用：响应数据，返回数据
  • M：model 模型层。作用：处理数据，和数据库打交道
• MVVM是前端视图层的概念
  • V：view 视图层。作用：展示数据
  • VM：view-model 视图模型层。作用：连接视图层和模型层，承上启下
  • M：model 模型层。作用：逻辑处理
    

vue的书写

• 1.引入vue.js文件
• 2.创建视图层（body中创建标签）
• 3.创建vue实例化对象 new Vue( { el,data,methods } )

vue对象中的el data methods名字不可变，单词拼写错误会报错

渲染数据常用命令

插值表达式

使用{{ }}引用变量，将data中的变量值渲染到页面上，可以做简单的计算

v-text

替换标签中原有的内容，不会解析富文本

v-html

替换标签中原有的内容，会解析富文本

	<div id="app">
        <!-- 插值表达式，使用{{}}引用变量，将data中的变量值渲染到页面上，可以做简单的计算 -->
        <div>{{msg}}</div>
        <!-- v-text，替换标签中原有的内容，不会解析富文本 -->
        <div v-text="msgText"></div>
        <!-- v-html，替换标签中原有的内容，会解析富文本 -->
        <div v-html="msgHtml"></div>
    </div>

	let vm = new Vue({
        el: '#app',//控制区域
        data: {
            msg: '插值表达式',
            msgText: 'v-text',
            msgHtml: 'v-html',
        },//变量
        methods: {
            }
        }//事件
    })

元素绑定常用命令

v-bind

元素属性绑定
在元素标签内部 v-bind:‘属性名’=‘data变量名’，可以简写成**:属性名=‘data变量名’‘**

        <!-- v-bind,给元素绑定属性，可以简写成： -->
        <a :href="url">百度</a>

let vm = new Vue({
        el: '#app',//控制区域
        data: {
            url: 'http://www.baidu.com'
        },//变量
        methods: { }//事件
    })

v-on

元素事件绑定
在元素标签内部 v-on:‘事件类型’=‘事件函数名’，可以简写成**@事件类型=’事件函数名‘**

        <!-- v-on，给元素绑定事件，可以简写成@ -->
        <button @click="btn">点击弹框</button>

事件函数写在vue实例对象的methods里面

let vm = new Vue({
        el: '#app',//控制区域
        data: {
        },//变量
        methods: {
            btn(){
                alert('v-on绑定事件');
                timer=setInterval(()=>{
                    console.log(this);//只有使用箭头函数，this才指向vue实例对象
                },1000)
            }
        }//事件
    })

命令修饰符

举例说明：给出三个颜色大小各不相同的盒子，样式代码如下，样式如图

	<div id="app">
        <div @click="big" class="big">
            <div @click="middle" class="middle">
                <div @click="small" class="small">
                </div>
            </div>
        </div>
    </div>

css样式

        .big {
            width:400px;
            height:400px;
            background-color: #b0ffff;
            margin:10px auto;
        }
        .middle {
            width: 300px;
            height: 300px;
            background-color: rgb(255, 141, 141);
            margin: 10px auto;

        }
        .small {
            width: 200px;
            height: 200px;
            background-color: rgb(167, 166, 255);
            margin: 10px auto;

        }

js代码

    let vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            big(){
                console.log('big');
            },
            middle() {
                console.log('middle');
            },
            small() {
                console.log('small');
            },
            baidu(){
                console.log('跳转百度');
            }
        }
    })

效果图

.stop

阻止事件冒泡，即事件由内向外触发
例如，点击最小的盒子时，打印结果会从小到大触发

在@事件类型后面加上.stop可以阻止事件冒泡

	<!-- .stop 阻止事件冒泡 -->
        <div @click="big" class="big">
            <div @click="middle" class="middle">
                <div @click.stop="small" class="small">
                </div>
            </div>
        </div>

再点击最小的盒子时，由于阻止了冒泡，因此只打印small

.capture

添加事件捕获，在事件触发时会先触发事件捕获，再触发事件冒泡

	<!-- .capture 添加事件捕获 -->
        <div @click="big" class="big">
            <div @click.capture="middle" class="middle">
                <div @click="small" class="small">
                </div>
            </div>
        </div>

给middle盒子添加.capture，触发small盒子会依次打印middle（捕获），small（触发），big（冒泡）

.once

只会触发一次事件
给small添加.once,第二次不再触发（但仍会触发事件冒泡）
第一次正常打印，

	 <!-- .once 事件只触发一次 -->
        <div @click="big" class="big">
            <div @click="middle" class="middle">
                <div @click.once="small" class="small">
                </div>
            </div>
        </div>

.self

只有事件在元素本身触发时才会执行回调函数

        <!-- .self 事件在元素本身触发时才触发 -->
        <div @click.self="big" class="big">
            <div @click="middle" class="middle">
                <div @click="small" class="small">
                </div>
            </div>
        </div>

只有点击big盒子时才会触发打印big

.prevent

阻止默认事件，阻止表单提交、a连接标签跳转

<!-- .prevent 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="baidu">百度一下</a>

会触发事件打印“跳转百度”但页面不会跳转

数据双向绑定

v-model

一般只用于表单元素（input、select、textarea等）的value属性
v-model:value=‘data中的变量值’，“:value”可以省略

双向绑定的原理

通过数据劫持结合发布者-订阅者模式实现。通过Object.defineProperty()劫持各个属性中的setter和getter。当数据发生变化时，执行相应的函数从而进行视图更新。

一个简单的加法器，双向绑定用于获取用户在input框里输入的值

	<div id="app">
        <!-- v-model 双向绑定，用于绑定表单控件的value属性 value可以省略-->
        <!-- v-bind只能单向绑定，用户在input框输入的值无法获取到 -->
        <input type="text" v-model="value1">+<input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">
    </div>

	let vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            value3: ''
        },
        methods: {
            add() {
                this.value3 = Number(this.value1) + Number(this.value2)
            }
        }
    })