Vue入门-初识与数据绑定

男娘i 2021-09-15 11:40 371阅读 0赞

一、Vue介绍  
vue是MVVM的框架, model, view, viewmodel, 由viewmodel控制所有逻辑的实现,实现把model渲染到view上,实现model和view高度分离,解耦.(model模型, view视图)  
二、Vue开发

*  A.通过script引入Vue文件,进行开发(较少使用)
 *  B.通过Vue-cli(即Vue脚手架,或命令行工具,类似于angular-cli)搭建项目,该方式是项目中的主流方式.

三、常见问题：什么是文本闪烁?  
当使用文件引入的方式进行开发,由于网络问题,Vue还没有加载完成,\{ \{\}\}写在了标签内部,导致\{ \{\}\}没有正常解读,导致作为普通文本显示出来.  
解决文本闪烁的问题方法:

*  方法一.把vue.js引入放在head中.
 *  方法二.使用v-clock指令,专门解决文本闪烁问题,使用\{ \{\}\},可以加上v-cloak指令,当Vue没有加载成功,v-cloak就是了一个普通的标签属性,通过属性选择器加载样式,当Vue加载成功时,就会识别v-cloak标签,就把那个隐藏样式去掉.

四、数据绑定

> 1.1值绑定

> > A.\{ \{\}\},插值表达式;可以放置变量、变量表达式、函数调用;注意:不要写多行语句;
> 
> > B.使用v-html/v-text进行值绑定;

> > 注意:v-text不能识别标签，而v-html可以识别标签；

> 1.2属性绑定

> > A.在Vue中,没有HTML属性与DOM属性的细分,
> 
> > B.在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind，如colspan属性；

> > 语法: v-bind:属性名="变量名/表达式",可以简写为: :属性名="变量名/表达式"

> 1.3.动态绑定CSS样式

> > 1.动态改变class
> 
> > 2.通过style,动态改变内联样式

> > 共同点:都支持对象和数组的值

> 1.4事件绑定

> > 语法:v-on:事件名="执行函数", 注意:执行函数后面可以加也可以不加,需要传入参数的时候加小括号
> 
> > 简写:@事件名

> 1.5.Vue事件修饰符

> > 1.普通事件

> > > stop:阻止事件冒泡
> 
> > > prevent:阻止该事件的默认操作
> 
> > > once:一次性事件

> > 2.键盘事件

> > > .enter, .tab, .left, .right, .up, .down, .meta, .ctrl, .shift, .alt, .delete, .esc;
> 
> > > .enter.alt表示enter键与alt键同时按下

> 1.6双向数据绑定

> > 结合双向数据绑定的标签有input,textarea等
> 
> v-model

> 1.7修饰符:

> > 1..lazy表示将input事件转换为change事件
> 
> > 2..trim:去除内容前后空格,中间的空格不可以消除
> 
> 3..number:转换为number类型

五、学习代码：（全部复制，即可参考学习）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>vue基础</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            h3 {
                margin-bottom: 10px;
            }
            li{
                list-style: none;
                margin-bottom: 8px;
            }
    
            [v-cloak] {
                display: none;
            }
    
            .fontSize {
                font-size: 20px;
            }
    
            .backgroundRed {
                background: red;
            }
    
            #event-left {
                width: 100px;
                height: 100px;
                background: blue;
                display: inline-block;
                border-radius: 50%;
            }
    
            #event-right {
                width: 100px;
                height: 100px;
                display: inline-block;
                border-radius: 50%;
            }
    
            #app {
                overflow: hidden;
            }
    
            .content {
                width: 210px;
                height: 210px;
                float: left;
                border: 2px solid blue;
                margin-left: 10px;
                margin-top: 10px;
                padding: 10px;
                border-radius: 5px;
                background:#f2f2f2;
            }
    
            .content:hover {
                border: 2px solid rgb(128, 0, 21);
                box-shadow: 5px 0 5px 0 rgb(128, 0, 21);
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <div class="content">
                <h3>值绑定一：插值表达式</h3>
                <p style="text-indent: 2rem;">{
       {}},插值表达式;可以放置变量、变量表达式、函数调用;</p>
                <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:不要写多行语句</p>
                <p>变量:{
       {description}}</p>
                <p v-cloak>表达式:{
       {5+3}}</p>
                <p>三目运算：{
       {isMan?'男人':'女人'}}</p>
            </div>
    
            <div class="content">
                <h3>值绑定二：v-html/v-text</h3>
                <p style="text-indent: 2rem;">使用v-html/v-text进行值绑定</p>
                <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:v-text不能识别标签，而v-html可以识别标签</p>
                <p v-text="strHtml"></p>
                <p v-html="strHtml"></p>
            </div>
    
            <div class="content">
                <h3>属性绑定一：v-bind</h3>
                <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:如果src属性值为字符串,则需要添加单引号;直接写在双引号中的,会默认为变量；</p>
                <p style="text-indent: 2rem;">在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind,如colspan属性；</p>
                <img :src="imgUrl" :width="20" alt="">
                <table style="display: inline-block;">
                    <tr>
                        <td :colspan="2">单元格</td>
                        <td>111</td>
                    </tr>
                </table>
            </div>
    
            <div class="content">
                <h3>属性绑定二：class</h3>
                <div class="backgroundRed" :class="{fontSize: true}" style="border-radius: 5px;margin-bottom: 10px;">A ：class后面跟对象</div>
                <div :class="['backgroundRed','fontSize']" style="border-radius: 5px;">B ：class后面跟数组</div>
            </div>
    
            <div class="content">
                <h3>属性绑定三：style</h3>
                <p :style="{height:'50px',color:'red'}" style="background: blueviolet;line-height: 50px;border-radius: 5px;margin-bottom: 10px;">A ：style后面跟对象</p>
                <p :style="aStyles" style="border-radius: 5px;">B ：style后面跟数组</p>
            </div>
    
            <div class="content">
                <h3>事件绑定一</h3>
                <button @click="doClick($event,'yiman')" style="background: aquamarine;border-radius: 5px;width: 100px;">点击事件</button>
                <p style="display: inline-block;">移入移出事件</p>
                <div id="event-left" :style="{border:'1px solid black',background:bgCol2}"></div>
                <div id="event-right" :style="{background: bgCol}" @mouseenter="doEnter($event)" @mouseleave="doLeave($event)"></div>
            </div>
    
            <div class="content">
                <h3>事件绑定二</h3>
                <p style="text-indent: 2rem;">结合属性绑定与事件绑定控制标签的显示与隐藏；</p>
                <button @click="doChange($event)" style="width: 100px;height: 30px;background:blueviolet;border-radius: 5px;">{
       {btnText?'隐藏':'显示'}}</button>
                <div id="in" style="background: green;width: 100px;height: 100px;" :style="{display:disValue}"></div>
            </div>
    
            <div class="content">
                <h3>事件修饰符:普通事件</h3>
                <p style="text-indent: 2rem;">stop:阻止事件冒泡；prevent:阻止该事件的默认操作；once:一次性事件；</p>
                <ul class="parent" style="border: 1px solid blue;" @click="doParent">
                    <li style="text-align: left"><button @click.stop="doChild">子级按钮-stop</button></li>
                    <li style="text-align: center"><a href="http://www.baidu.com" @click.prevent.stop="toBaidu">前往百度-prevent</a></li>
                    <li style="text-align: right"><span style="background: red;width: 50px;height: 30px;" @mouseenter.once="once">once</span></li>  
                </ul>
            </div>
    
            <div class="content">
                <h3>事件修饰符：键盘事件</h3>
                <p style="text-indent: 2rem;">注意：需要同时按下enter与alt键才可以触发绑定的事件；</p>
                <input type="text" @keyup.enter.alt="keyUp($event)">
            </div>
    
            <div class="content">
                <h3>双向数据绑定一</h3>
                <input type="text" @input="doInput" :value="msg" ref="ipt">
                <p>输入框的内容为：{
       {msg}}</p>
            </div>
    
            <div class="content">
                <h3>双向数据绑定二</h3>
                <p style="text-indent: 2rem;">vue使用v-model实现数据绑定；</p>
                <input type="text" v-model="msg2">
                <p>输入框的内容为：{
       {msg2}}</p>
            </div>
    
            <div class="content">
                <h3>双向数据绑定三</h3>
                <p style="text-indent: 2rem;">结合v-model使用的修饰符</p>
                <p style="text-indent: 2rem;">1..lazy表示将input事件转换为change事件;</p>
                <p style="text-indent: 2rem;">2..trim:去除内容前后空格,中间的空格不可以消除;</p>
                <input type="text" v-model.lazy.trim="msg3">
                <p>{
       {msg3}}</p>
            </div>
            <div class="content">
                    <h3>初始化视图模型</h3>
                    <p style="text-indent: 2rem;font-size: 15px;">el:该视图模型挂载到哪个节点上,只有在该节点中,才能使用该视图模型的属性和方法；</p>
                    <p style="text-indent: 2rem;font-size: 15px;">data:里面存放所有的变量,在页面中显示的变量,都要在data中进行声明或者赋值；</p>
                    <p style="text-indent: 2rem;font-size: 15px;">methods:存储所有在该视图模型中用到的方法；</p>
                </div>
        </div>
    </body>
    
    </html>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm1 = new Vue({
            el: '#app',
            data: {
                description: '变量',
                isMan: false,
                strHtml: '<a href="###">a标签</a>',
                imgUrl: 'http://placehold.it/200x200',
                aStyles: [{
                        border: '1px solid black'
                    },
                    {
                        background: 'pink'
                    }
                ],
                bgCol: 'red',
                bgCol2: 'blue',
                disValue: 'block',
                btnText: true,
                msg: '',
                msg2: '',
                msg3: ''
            },
            methods: {
                // es6中对象中键值对的简写(属性,方法)
                doClick(e, str) {
                    console.log("点击事件的方法", e, str);
                    this.bgCol2 = 'pink';
                },
                doEnter(e) {
                    // console.log(this);
                    this.bgCol = 'yellow';
                },
                doLeave(e) {
                    this.bgCol = 'red';
                },
                doChange(e) {
                    this.btnText = !this.btnText;
                    // 第一次点击
                    if (this.btnText) {
                        this.disValue = 'block';
                    } else {
                        this.disValue = 'none';
                    }
                },
                doParent() {
                    alert("父级事件执行");
                },
                doChild() {
                    alert("子级事件执行");
                },
                toBaidu() {
                    alert("点击了a标签");
                },
                once() {
                    alert("鼠标移入了");
                },
                keyUp(e) {
                    alert("键盘抬起了", e.keyCode);
                },
                doInput() {
                    console.log(this.$refs);
                    this.msg = this.$refs.ipt.value;
                }
            },
            // 钩子函数(该vm创建成功之后触发)
            created: function () {
                setInterval(() => {
                    this.msg = "卫庄";
                    this.msg2 = "盖聂";
                }, 2000);
            }
        });
        console.log('在外面访问', vm1.bgCol);
    </script>

六、效果图

![20180524191350277][]

[20180524191350277]: /images/20210802/3d4978123e2f4c288f294d9ea81ec77d.png