Vue 基础 模板语法

其他 2021-03-30 22:03:44 阅读次数: 0

Vue

Vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javaScript框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kB运行大小，超快虚拟 DOM

Vue基本使用

传统开发模式

<body>
    <div id="msg"></div>
    <script type="text/javascript">
        var msg = 'Hello World';
        var div = document.getElementById('msg');
        div.innerHTML = msg;
    </script>
</body>

JQuery开发

<div id="msg"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        var msg = 'Hello World！';
        $('#msg').html(msg);
    </script>

Vue开发

<div id="app">
        <div>{
   
   {msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
     
     
            el: '#app',
            data: {
     
     
                msg: 'Hello Vue'
            }
        })
    </script>

Vue.js之HelloWorld细节分析

实例参数分析
⚫ el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
⚫ data：模型数据（值是一个对象）

插值表达式用法

<div>{
    
    {
    
    msg}}</div>

⚫ 将数据填充到HTML标签中
⚫ 插值表达式支持基本的计算操作

Vue代码运行原理分析
⚫ 概述编译过程的概念（Vue语法→原生语法）
在这里插入图片描述

Vue模板语法

前端渲染

把数据填充到HTML标签中
在这里插入图片描述

前端渲染方式

⚫ 原生js拼接字符串
⚫ 使用前端模板引擎
⚫ 使用vue特有的模板语法

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中

var d = data.weather;
        var info = document.getElementById('info');
        info.innerHTML = '';
        for (var i = 0; i < d.length; i++) {
    
    
            var date = d[i].date;
            var day = d[i].info.day;
            var night = d[i].info.night;
            var tag = '';
            tag += '<span>日期：' + date + '</sapn><ul>';
            tag += '<li>白天天气：' + day[1] + '</li>'
            tag += '<li>白天温度：' + day[2] + '</li>'
            tag += '<li>白天风向：' + day[3] + '</li>'
            tag += '<li>白天风速：' + day[4] + '</li>'
            tag += '</ul>';
            var div = document.createElement('div');
            div.innerHTML = tag;
            info.appendChild(div);
        }

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

使用前端模板引擎
<script id="abc" type="text/html">
        {
    
    {
    
    if isAdmin}}
        <h1>{
    
    {
    
    title}}</h1>
        <ul>
            {
    
    {
    
    each list as value i}}
            <li>索引 {
    
    {
    
    i + 1}} ：{
    
    {
    
    value}}</li>
            {
    
    {
    
    /each}}
        </ul>
        {
    
    {
    
    /if}}
    </script>

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

模板语法概览

⚫ 差值表达式
⚫ 指令
⚫ 事件绑定
⚫ 属性绑定
⚫ 样式绑定
⚫ 分支循环结构

指令

指令的本质就是自定义属性

指令的格式：以v-开始（比如：v-cloak）
v-cloak指令用法

插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值

<style>
        [v-cloak] {
     
     
            display: none;
        }
    </style>
</head>

<body>
    <div class="app">
        <div v-cloak>{
   
   {msg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
     
     
            el: '.app',
            data: {
     
     
                msg: 'Hello'
            }
        })
    </script>
</body>
数据绑定指令

⚫ v-text 填充纯文本
① 相比插值表达式更加简洁

⚫ v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用

⚫ v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）

<body>
    <div id="app">
        <div>{
   
   {msg}}</div>
        <!--Hello Vue -->
        <div v-text='msg'></div>
        <!--Hello Vue -->
        <div v-html='msg1'></div>
        <!--Hello Vue -->
        <div v-pre>{
   
   {msg}}</div>
        <!--{
    
    {msg}} -->
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
         1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
         2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
         3、v-pre用于显示原始信息
         */
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                msg: 'Hello Vue',
                msg1: '<h1>HTML</h1>'
            }
        });
    </script>
</body>
数据响应式

⚫ 如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）

⚫ 什么是数据绑定
① 数据绑定：将数据填充到标签中

⚫ v-once 只编译一次
① 显示内容之后不再具有响应式功能

<body>
    <div id="app">
        <div>{
   
   {msg}}</div>
        <div v-once>{
   
   {info}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
        v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。
        */
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                msg: 'Hello Vue',
                info: 'nihao'
            }
        });
    </script>
</body>

双向数据绑定指令

  • 当数据发生变化的时候，视图也就发生变化
  • 当视图发生变化的时候，数据也会跟着同步变化
    在这里插入图片描述
<body>
    <div class="app">
        <div>{
   
   {msg}}</div>
        <input type="text" v-model="msg">
    </div>
    <script src="js/vue.js"></script>
    <script>
        var nm = new Vue({
     
     
            el: '.app',
            data: {
     
     
                msg: 'hello'
            }
        })
    </script>
</body>

MVVM设计思想

① M(model) 数据
② V(view) 试图
③ VM(View-Model)
在这里插入图片描述

事件绑定

Vue如何处理事件？

v-on指令用法

 <input type=‘button' v-on:click='num++'/>

v-on简写形式

<input type=‘button' @click='num++'/>
事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>Hello</button>

调用函数

<button v-on:click='say()'>Say hi</button>

<button v-on:click='say("hi",$event)'>Say hi</button>
<body>
    <div id="app">
        <div>{
   
   {num}}</div>
        <div>
            <button v-on:click='num++'></button>
            <button @click='num++'></button>
            <button @click='sum'></button>
            <button @click='sum()'></button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                num: 0
            },
            methods: {
     
     
                sum: function() {
     
     
                    this.num++
                }
            }

        })
    </script>
</body>
事件函数参数传递

普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hi</button>

<body>
    <div id="app">
        <div>{
   
   {num}}</div>
        <div>
            <!-- 
            如果事件直接绑定函数名称
            那么默认会传递事件对象作为事件函数的第一个参数 
            -->
            <button v-on:click='handle1'>点击1</button>
            
            <!-- 
            2、如果事件绑定函数调用
            那么事件对象必须作为最后一个参数显示传递
            并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                num: 0
            },
            methods: {
     
     
                handle1: function(event) {
     
     
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
     
     
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>
事件修饰符

.stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

<body>
    <div class="app">
        <div>{
   
   {num}}</div>
        <div @click='sum0'>
            <button @click.stop='sum1'></button>
        </div>
        <div>
            <a href="http://www.baidu.com" v-on:click.prevent='sum2'>百度</a>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var nm = new Vue({
     
     
            el: '.app',
            data: {
     
     
                num: 0
            },
            methods: {
     
     
                sum0: function() {
     
     
                    this.num++
                },
                sum1: function(event) {
     
     
                    // event.stopPropagation()
                },
                sum2: function(event) {
     
     
                    // 阻止默认行为
                    // event.preventDefault();
                }

            }
        })
    </script>
</body>
按键修饰符

.enter 回车键

 <input v-on:keyup.enter='submit'>

.esc 退出键

<input v-on:keyup.delete='handle'>
自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

<script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        info: ''
      },
      methods: {
    
    
        handle: function(event){
    
    
          console.log(event.keyCode)
        }
      }
    });
  </script>

<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
            </div>
            <div>
                密码：
                <!-- 自定义按键 -->
                <input type="text" v-on:keyup.f2='handleSubmit' v-model='pwd'>
            </div>
            <div>
                <input type="button" v-on:click='handleSubmit' value="提交">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 事件绑定-按键修饰符
        Vue.config.keyCodes.f1 = 113
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                uname: '',
                pwd: '',
                age: 0
            },
            methods: {
     
     
                clearContent: function() {
     
     
                    // 按delete键的时候，清空用户名
                    this.uname = '';
                },
                handleSubmit: function() {
     
     
                    console.log(this.uname, this.pwd)
                }
            }
        });
    </script>
</body>

属性绑定

Vue如何动态处理属性？

v-bind指令用法

<a v-bind:href='url'>跳转</a>

缩写形式

<a :href='url'>跳转</a>

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度1</a>
        <button v-on:click='handle'>切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 属性绑定

        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                url: 'http://www.baidu.com'
            },
            methods: {
     
     
                handle: function() {
     
     
                    // 修改URL地址
                    this.url = 'http://itcast.cn';
                }
            }
        });
    </script>
</body>
v-model的低层实现原理分析
<body>
    <div class="app">
        <div>{
   
   {msg}}</div>
        <!-- 三种方式都可进行双向绑定 -->
        <input type="text" v-bind:value='msg' v-on:input='handle'>
        <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
        <input type="text" v-model='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var nm = new Vue({
     
     
            el: '.app',
            data: {
     
     
                msg: 'hello'
            },
            methods: {
     
     
                handle: function(event) {
     
     
                    this.msg = event.target.value;
                }
            }
        })
    </script>
</body>

样式绑定

class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

示例

<style type="text/css">
    .active {
     
     
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
     
     
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
     
     
      el: '#app',
      data: {
     
     
        isActive: true,
        isError: true
      },
      methods: {
     
     
        handle: function(){
     
     
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

示例

<style type="text/css">
        .active {
     
     
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        
        .error {
     
     
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 样式绑定
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
     
     
                handle: function() {
     
     
                    this.activeClass = '';
                    this.errorClass = '';
                }
            }
        });
    </script>
</body>
style样式处理

对象语法

<div v-bind:style="{
       
        color: activeColor, fontSize: fontSize }"></div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

示例

<body>
    <div id="app">
        <div v-bind:style='{
       
       border: borderStyle, width: widthStyle, height: heightStyle}'></div>
        <div v-bind:style='objStyles'></div>
        <div v-bind:style='[objStyles, overrideStyles]'></div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              样式绑定之内联样式Style：
              
            */
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',

                objStyles: {
     
     
                    border: '1px solid green',
                    width: '200px',
                    height: '100px'
                },
                overrideStyles: {
     
     
                    border: '5px solid orange',
                    backgroundColor: 'blue'
                }
            },
            methods: {
     
     
                handle: function() {
     
     
                    this.heightStyle = '100px';
                    this.objStyles.width = '100px';
                }
            }
        });
    </script>
</body>

分支循环结构

分支结构

⚫ v-if
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

<div v-if="false">65465465454</div> //不会显示

也就是根本没有不会有对应的标签出现在DOM中。
⚫ v-else

<div v-if>65465465454</div>
//会显示

<div v-else>65465465454</div>
不会显示

⚫ v-else-if
⚫ v-show

<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>60'>一般</div>
        <div v-else>比较差</div>
        <div v-show='flag'>测试v-show</div>
        <button v-on:click='handle'>点击</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        //   分支结构
        //   v-show的原理：控制元素样式是否显示 display:none
        var vm = new Vue({
     
     
            el: '#app',
            data: {
     
     
                score: 10,
                flag: false
            },
            methods: {
     
     
                handle: function() {
     
     
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
v-if与v-show的区别

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

循环结构

v-for遍历数组

<li v-for='item in list'>{
   
   {item}}</li>

<li v-for='(item,index) in list'>{
   
   {item}} + '---' +{
   
   {index}}</li>

key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{
   
   {item}} + '---' {
   
   {index}}</li>

<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{
   
   {item}}</li>
      <li v-for='(item, index) in fruits'>{
   
   {item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{
   
   {item.ename}}</span>
        <span>-----</span>
        <span>{
   
   {item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
     
     
      el: '#app',
      data: {
     
     
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
     
     
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
     
     
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
     
     
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

<body>
  <div id="app">
     <!-- 13---age---1 -->
    <div v-if='v==13' v-for='(v,k,i) in obj'>{
   
   {v + '---' + k + '---' + i}}</div>
  </div> 
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 使用原生js遍历对象
    var obj = {
     
     
      uname: 'lisi',
      age: 12,
      gender: 'male'
    }
    for(var key in obj) {
     
     
      console.log(key, obj[key])
    }
    /*
      循环结构
    */
    var vm = new Vue({
     
     
      el: '#app',
      data: {
     
     
        obj: {
     
     
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>

用户切换案例

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。

<body>
    <div class="app">
        <span v-if="isUser">用户登录：<input type="text" placeholder="用户登录"></span>
        <span v-else>邮箱登录：<input type="text" placeholder="邮箱登录"></span>
        <button v-on:click="Clickchange()">切换登陆方式</button>
    </div>
    <script src="../Vue基础/js/vue.js"></script>
    <script>
        const vm = new Vue({
     
     
            el: '.app',
            data: {
     
     
                isUser: true
            },
            methods: {
     
     
                Clickchange() {
     
     
                    this.isUser = !this.isUser;
                }
            }
        })
    </script>
</body>
案例小问题

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

但是按道理讲，我们应该切换到另外一个input元素中了。在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

所以input框进行复用 但是里面的值不会改变

解决方案：

如果我们不希望Vue出现类似重复利用的问题
可以给对应的input添加key 并且我们需要保证key的不同

<span v-if="isUser">
用户登录：<input type="text" placeholder="用户登录" key="user">
</span>

<span v-else>
邮箱登录：<input type="text" placeholder="邮箱登录" key="email">
</span>

这样就解决了。

猜你喜欢

转载自blog.csdn.net/Ulrica_Amaris/article/details/115263665
今日推荐
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
周排行
SVN同步出现问题
解决 nginx 出现 413 Request Entity Too Large 的问题
第一节 区块链服务BaaS的总体架构以及基本模块设计的一种方案
ITeye 2013年度盘点——社区赠书书单
IDEA / git 和github 的新手使用教程 史上最简单的 IntelliJ IDEA 教程 史上最简单的 GitHub 教程
测试工程方法：测试用例设计综合策略
Spark优化(三)：对多次使用的RDD进行持久化
使用STM32 ST-LINK Utility 设置读保护后不能运行
exgcd 解同余方程ax=b(%n)
Android使用脚本进行多渠道打包
每日归档
更多
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022