Vue.js（2.5）学习记录1

Vue模板语法：

模板语法概述：

如何理解前端渲染：把数据填充到HTMl标签中

 

 2.前端渲染方式

原生js拼接字符串，使用前端模板引擎

3.原生js拼接字符串

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

4.使用前端模板引擎

5.模板语法概览：插值表达式，指令，事件绑定，属性绑定，样式绑定，分支循环结构

 

3.2指令

1.指令：指令的本质是自定义属性，指令的格式：以v-开始（比如：v-cloak）

2.v-cloak指令用法：解决插值表达式存在闪动问题

3.数据绑定指令：v-text填充纯文本，v-html填充html片段容易被导致跨站脚本攻击，本网站内部数据可用第三方数据不可用

v-pre填充原始信息

4.数据响应式：html5的响应式：屏幕尺寸的变化导致样式的变化，数据的响应式：数据的内容的变化会导致页面内容的变化；数据绑定：把数据填充到标签中；V-once：只编译一次

 

3.3双向数据绑定

1.

2.v-model指令双向绑定

            <input type="text" v-model="msg">

3.MVVM设计思想

M（model）V（view）VM（View-Model）

 

 

从视图到模型用的是事件监听，从模型到视图用的是数据绑定

 

3.4事件绑定

1.v-on指令和简写形式：

            <button v-on:click="num++">点击1</button>
            <button @click="num++">点击2</button>

2.事件函数的调用方式：

            <button @click="handle">点击3</button>
            <button @click="handle()">点击3</button>

3.事件函数参数传递：

普通参数和事件对象：

        <button @click="handle(123,456,$event)">点击1</button>

4.事件修饰符：

.stop阻止冒泡

.parent阻止默认行为

            <button @click.stop="handle1">点击</button>

            <a href="http://www.baidu.com" @click.prevent="handle2">百度</a>

5.按键修饰符

.enter回车键

.delete删除键

                <input type="text" @keyup.delete="handle1" v-model="username">
                <input type="password" @keyup.enter="handleSubmit" v-model="password">

6.自定义按键修饰符

全局config.keyCodes对象

            <input type="text" @keyup.aaa="handle">

 

 

 

 

 

 

 

 

 

 

摘要自：https://www.bilibili.com/video/BV1vE411871g?p=3