关注我吧
vue基础指令
主要作用是: 模板+数据::: 前端渲染, === 也就是把数据填充到html中去,
指令(以 v- 开始)
插值表达式: {{}} ---> 将数据填充到Html页面中, 做一些基本的计算操作
---> 存在闪动的问题, 使用 v-clock 解决
<div>{{msg}}div>
1
2
v-clock: 解决闪动 , 需要提供样式 v-clock{ display: none}
原理: 先通过样式隐藏内容, 然后在内存中进行值的替换, 替换后在显示.
<div v-clock>{{msg}}div><style>[v-clock] {
display: none;}style>
1
2
3
4
5
6
v-text, v-html, v-pre都是将数据插入到html中
v-text: 插入的是纯文本, 字符串是怎么样就怎么样显示, 和插值表达式基本一样,但是不会出现闪动
v-html: 会将html解析后,插入页面,
v-pro: 显示的原始值, 不去编译 包括 {{}} 都会被显示出来
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><div id="app">
<div>{{msg}}div>
<div v-text="msg">div>
<div v-html="msg">div>
<div v-pro>{{msg}}div>div><script>
var vm = new Vue({
el: '#app',
data() {
return {
msg: '
你好,vue
'
}
},
})script>
18
19结果:
v-once只编译一次
数据的改变,视图不会去改变,.
应用场景: 显示的信息后续不需要在修改,可以使用
v-model 双向数据绑定 (底层就是事件绑定)
视图的改变,数据也会变化... 数据的改变,视图会改变
12// v-model的底层实现原理:<input v-bind:value="msg" v-on:input="msg = $event.target.value">
v-on 事件绑定, 语法糖@ , 事件对象$event 默认会传递:事件对象
事件修饰符
1. 传统的JS阻止冒泡 event.stopPropagation()
vue阻止事件冒泡: .stop
主要用于键盘事件中,用于过滤点击按键,做一些相关的事件
如: @keyup.enter="handle()"
事件修饰符可以连写,但是先后顺序是不一样的
JS阻止默认行为: event.preventDefault()
vue阻止默认行为: .prevent
按键修饰符
学到这里可以写一个简单的加法计算器了哟
v-bind属性绑定: 语法糖 :
可以绑定一些定义在data里面的数据. 或者是动态的去改变这个属性值
样式绑定:
方式1: 对象的方式
方式2: 数组的方式
样式绑定相关细节:
数组,和对象的结合使用
1<div :calss="[calss1, calss2, {calss3: isShow }]">
style绑定: 对象的方式,数组的方式. 也可以简化结和
表单域修饰符: (v-model的修饰符)
v-model.number 转化为数值类型
trim: 去掉开始和结尾的空格
lazy: 将input事件切换为change事件 (作用: 校验)
input 事件是输入就会去执行
change事件是失去焦点后才执行
基础语法
分支结构
12<div v-if="isLogin">{{msg}}div><div v-else>{{str}}div><div v-show="isLogin">{{msg}}div>
- 3
v-for 遍历数组
1<li v-for="(item, index) in fruits" :key="index">{{index}} -- {{item}}li>
key的作用:
帮助Vue区分不同的元素,从而提高性能
v-if
v-else
v-else-if
v-show
重点: v-if和v-show的区别:
v-if: 控制元素是否渲染, 变换的很少
v-show: 控制元素是否显示,,, 通过dispaly 控制元素是否显示, 实际DOM树已经生成, 高频率切换的适合使用. 所以, v-show具有高.初始化消耗
分支循环结构:
完整的代码
DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vue入门第一个代码title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><style type="text/css">[v-cloak] {display: none;}style>head><body><div id="app"><div v-pre>{{message}}div><div v-cloak>{{message}}div><div v-once>第一次绑定的值,不能在做修改:{{message}}div><div v-text="message">div><div v-html="msgHtml">div><div v-if="isLogin">isLogin为ture显示div><div v-else>isLogin为false显示div><div v-show="isLogin">isLogin为ture显示div><ul><li v-for="(value, key, index) in items" :key="key">
{{ key }} - {{ value }} li>ul><div>{{count}}div><button v-on:click="add">加分button><button @click="add">加分button><br/><input type="text" v-model="message"><br/>div><script type="text/javascript">var app = new Vue({
el:'#app',data() {return {
message: 'hello Vue',
msgHtml: '
hello Vue
',
isLogin: false,
items: [1,2,3],
count:0}},
methods: {add() {this.count++;}}})script>body>html>
关注我获取到更多!