Vue入门第2天-------Vue模板语法(一)-蒲公英云

Vue入门第2天-------Vue模板语法(一)

小鱼儿 2023-07-07 12:41 26阅读 0赞

一、Vue模板语法

1.1前端渲染

前端渲染

把数据填充到HTML标签中

前端渲染方式

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

1.2指令

什么是指令？

自定义属性就是指令
指令的格式：以v-开始（比如：v-cloak）

v-cloak指令的用法

提供样式

[v-cloak]{
```
 display:none;
 }
```
在插值表达式所在的标签中添加v-cloak指令

{ { msg}}

使用v-cloak是因为插值表达式存在闪动问题。

解决问题的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令

v-text 填充纯文本
相比插值表达式更加简洁
v-html 填充HTML片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息
显示原始信息，跳过编译过程（分析编译过程）

数据响应式

如何理解响应式
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
数据绑定：将数据填充到标签中
v-once只编译一次
显示内容之后不再具有响应式功能
v-once的应用场景： 如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提供性能。

双向数据绑定

什么是双向数据绑定？

用户去修改页面中的表单输入域中的内容会影响数据中的内容变化；数据中的内容变化会影响页面中数据绑定的内容的变化。

双向数据绑定分析：

v-model指令用法:

MVVM设计思想

M(model)——提供数据
V(view)——提供页面展示效果
VM(View-Model)——实现控制逻辑，把两者结合在一起

事件绑定

Vue如何处理事件？

v-on指令用法
v-on简写形式

事件函数的调用方式

直接绑定函数名称
调用函数

例子：

<div id="app">
            <div>{ { num}}</div>
            <div>
                <button v-on:click="num++">点击1</button>
                <button @click="num++">点击</button>
                <button @click="handle">点击2</button>
                <button @click="handle()">点击3</button>
            </div>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            var vm = new Vue({ 
                el: '#app',
                data:{ 
                    num:0
                },
                methods:{ 
                    handle:function(){ 
                        //这里的this是Vue的实例对象
                        this.num++;
                    }
                }
            })
        </script>

注意：函数必须得定义在methods当中，这里的this是Vue的实例对象。

事件函数参数传递

普通参数和事件对象

注意：

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

事件修饰符

.stop阻止冒泡

跳转
.prevent阻止默认行为

跳转

还有一些其它的事件修饰符，可以看官网之后练一下！

按键修饰符

.enter回车键
.delete删除键

还有一些其它的按键修饰符，可以看官网之后练一下！

自定义按键修饰符

全局config.keyCodes对象

Vue.config.keyCodes.f1 = 112

规则：自定义按键修饰符名字是自定义的，但是对应的值必须的按键对应event.keyCode值

二、简单计算器案例

需求：实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面。

思路：

通过v-model指令实现数值a和数值b的绑定
给计算按钮绑定事件，实现计算逻辑
将计算结果绑定到对应位置

代码：

<div id="app">
            <h1>简单计算器</h1>
            <div>
                <span>数值A</span>
                <span>
                    <input type="text" v-model="a"/>
                </span>
            </div>
            <div>
                <span>数值B</span>
                <span>
                    <input type="text" v-model="b"/>
                </span>
            </div>
            <div>
                <button v-on:click="handle">计算</button>
            </div>
            <div>
                <span>计算结果:</span>
                <span v-text="result"></span>
            </div>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            var vm = new Vue({ 
                el:'#app',
                data:{ 
                    a:'',
                    b:'',
                    result:''
                },
                methods:{ 
                    handle:function(){ 
                        //实现计算逻辑
                        this.result=parseInt(this.a)+parseInt(this.b);
                    }
                }
            })
        </script>