vue基础语法 及指令

最新推荐文章于 2024-02-08 09:55:26 发布
最新推荐文章于 2024-02-08 09:55:26 发布
阅读量435 收藏
点赞数
分类专栏： 个人 文章标签： vue基本语法及指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShirleyXuMM/article/details/93101845
版权
vue mustache语法糖-- {{ }} 

它是用来操作dom的，指令就是绑定在DOM的一个属性，并且这属性具有一定功能。
  • 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM
  • 这个指令需要模板语法的支持，所以我们采用jsx语法糖

jsx: javascript + xml

JSX 是一种JavaScript的语法扩展，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。

可以让我们在dom结构中输写javascript

vue 简洁模板语法

<div id="app">       
<p> {{ this.msg }} </p>  // {{ msg }} 是 this.msg 简写
<p> {{ this.$data.msg }} </p>
<p> {{ this._data.msg }} </p>
<p> {{ msg }} </p>

// this.$data.msg -> this.msg -> msg

$data _data 方法都可以在vue的函数的原型中找到
</div>


var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
    }
})

下面这种写法等同于上面的模板写法
var vm = new Vue({
el: `
<div id="app">
<p> {{ ${ this.msg } }} </p>
</div>
`,
data: {
msg: 'hello vue.js'
    }
})

注意：使用vue模板时，必须引用vue.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

mustache语法糖对数据类型的支持（ js语法的支持 ）

回顾数据类型划分

数据类型：
    第一种划分：
        基础数据类型： number string boolean
        复杂数据类型: Object( array function )
        特殊数据类型: null undefined
    第二种划分：
        初始数据类型: number string boolean null undefined
        引用数据类型: object( array function )

 mustache支持我们js的数据类型的

<div id="app">
<p> number: {{ num }} </p>
<p> string: {{ str }} </p>
<p> boolean: {{ bool }} </p>
<p> null: {{ nul?'1':'2' }} </p>
<p> undefined: {{ und && 1 || 2 }} </p>
<p> object: {{ obj.name }} </p>
<p> array: {{ arr[0] }} </p>
<p> fn: {{ fn() }} </p>
<!-- <p> console.log: {{ console.log( 1 ) }} </p>
<p> alert: {{ alert( 2 ) }} </p> -->
</div>

var vm = new Vue({
el: '#app',
data: {
num: 100,
str: 'hello Vue.js',
bool: true,
nul: null,
und: undefined,
obj: {
name: 'Gabriel Yan'
    },
arr: [1,2,3,4],
fn: function () {
alert( 2 )
return '这是一个函数'
    }
  }
})

注意： conosle.log 和 alert 在我们mustache语法中是不支持的 但是如果放在函数体内执行是可以的

mustache 绑定 dom的属性

案例： v-html

<div id="app">
<p v-html = "h"></p> // html可以识别标签
<p v-text = "msg"></p> // text不可以识别标签
<p v-text = " flag && 1 || 2 " > </p> // 数据值也可以直接写成表达式的形式
</div>

var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
h: '<h3> hello Vue.js </h3>',
flag: true
    }
})

分析： 发现dom元素直接有了一个内容
这种属性绑定就是为了操作dom

结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字

Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
Vue 2.0 统称为 ‘指令’

指令是用一个 v-xxx 表示
指令是用来操作dom
Vue中不允许直接操作dom
mustache语法 --- 属性写法 的属性值是直接写数据的，不需要使用 {{ }}


Vue指令

问题： 我们说vue是 MVVM 框架， 那么谁是 M 谁是 V 谁是 VM ？

M： Model 数据 --data
V： View 视图 --el
VM: ViewModel 视图模型（ new Vue() ）

<!-- V -->
<div id="app"></div>

var vm = new Vue({
el: '#app',//给跟实例一个模板（ 挂载 ）
data: { //M

    }
})

指令： ( 是绑定在dom属性上 )

v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）)

v-text： 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerTEXT ）

条件渲染的指令

v-show： 可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）

v-if： 可以控制一个dom的存在与否（ 创建 和 销毁 ）
v-else
v-else-if

<div id="app">
<h3> v-show </h3>
<p v-show = "showFlag"> v-show指令 </p>
<hr>
<h3> v-if - 单路分支 </h3>
<p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
<h3> v-if - 双路分支 </h3>
<p v-if = "ifFlag"> 双路分支 成立 </p>
<p v-else> 双路分支不成立 </p>


<h3> v-if - 多路分支 </h3>
<p v-if = " type === 'A'"> A </p>
<p v-else-if = " type === 'B'"> B </p>
<p v-else> C </p>
</div>

var vm = new Vue({
el: '#app',//给跟实例一个模板（ 挂载 ）
data: {
showFlag: true,
ifFlag: false,
type: 'A'
    }
})

面试题（ 实用题 ） 【 钻石 】
    
  1. v-if vs v-show 区别
    v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
    v-show 操作的是dom元素的display属性
    v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
    v-show 只能写一个单路形式

  2. 实用： 项目中 如何选择这两个使用
     一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
    因此，如果需要非常频繁地切换，则使用 v-show 较好；
    如果在运行时条件很少改变，则使用 v-if 较好。


列表渲染的指令

v-for：
    1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
    2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
    3. json类型数据
    4. 嵌套类型数据

<div id="app">

<h3> 数组 </h3>
<ul>
    <li v-for = " (item,index) in arr ">
        <p> item :{{ item }} -- index: {{ index }}</p>
    </li>
</ul>
<hr>

<h3> 对象 </h3>
<ul>
    <li v-for = "(item,key,index) in obj">
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
    </li>
</ul>
<hr>

<h3> json </h3>
<ul>
    <li v-for = "(item,index) of json">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
    </li>
</ul>
<hr>

<h3> 嵌套 </h3>
<ul>
    <li v-for = " item in lists ">
        <p> id: {{ item.id }} </p>
        <ul>
            <li v-for = "todo in item.todos">
                todos中的数据 -- {{ todo }}
            </li>
        </ul>
    </li>
</ul>
</div>

new Vue({
    el: '#app',
    data: {
        arr: [1,2,3,4],
        obj: {
            id: 1,
            name: '骏哥',
            sex: 'man',
            age: 18
        },
        json: [
            {
                id: 1,
                task: '敲代码1'
            },
            {
                id: 2,
                task: '敲代码2'
            }
         ],
        lists: [
            {
                id: 1,
                todos: {
                        id: 1,
                        name: '连城'
                    }
            },
            {
                id: 2,
                todos: {
                        id: 2,
                        name: '文武'
                    }
            }
        ]
    }
})

key

给每一个循环的列表添加一个唯一的标识

使用指令 v-bind 来绑定 key
<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>

如果有id，那么我们就使用id，如果没有，我们才会选择index

v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上
eg:  key = " item.id 将item.id值绑定给了key

简写：
<div v-for = " (item,index) in lists" :key = " item.id "></div>

<div id="app">
<h3> 数组 </h3>
<ul>
<li v-for = " (item,index) in arr " v-bind:key = "index">
<p> item :{{ item }} -- index: {{ index }}</p>
</li>
</ul>
<hr>
<h3> 对象 </h3>
<ul>
<li v-for = "(item,key,index) in obj" v-bind:key = "index">
<p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
</li>
</ul>
<hr>
<h3> json </h3>
<ul>
<li v-for = "(item,index) of json" v-bind:key = " item.id ">
<p> id: {{ item.id }} </p>
<p> task: {{ item.task }} </p>
<p> {{ index }} </p>
</li>
</ul>
<hr>
<h3> 嵌套 </h3>
<ul>
<li v-for = " item in lists " :key = "item.id">
<p> id: {{ item.id }} </p>
<ul>
<li v-for = "todo in item.todos">
todos中的数据 -- {{ todo }}
</li>
</ul>
</li>
</ul>
</div>



new Vue({
el: '#app',
data: {
arr: [1,2,3,4],
obj: {
id: 1,
name: '骏哥',
sex: 'man',
age: 18
},
json: [
{
id: 1,
task: '敲代码1'
},
{
id: 2,
task: '敲代码2'
}
],
lists: [
{
id: 1,
todos: {
id: 1,
name: '连城'
}
},
{
id: 2,
todos: {
id: 2,
name: '文武'
}
}
]
}
})

Vue中给dom添加类名

为什么要绑定类名？
指令是用来操作dom
目的： 为了将来通过数据来操作类名，类名操作dom

1. 直接在dom上绑定类名

2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样
<p :class = "{ size,bg_color }"></p>
size是自定义的属性， 它的属性值是undefined， 相当于是false
<p :class = "{ size: true, bg_color: true }"></p>
size也是自定义属性，他的属性是true,那么就会加上去
<p :class = "{ [s]: true, [bg_color]: true }"></p>
格式： v-bind:class = "{ 属性： boolean }"
格式： v-bind:class = "{ [data]： boolean }"

3. vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式： v-bind:class = "[ 数据 ]"

4. 类名绑定不会覆盖原先的类名

<style>
.box {
width: 100px;
height: 100px;
}
.bg_color {
background-color: red;
}
</style>

<div id="app">
<!-- 直接添加类名 -->
<p class="box bg_color"></p>

<!-- 对象形式添加类名 -->
<!-- 第一种 -->
<p :class="{box,bg_color}"></p>


<!-- 第二种 -->
<p :class="{box:true,bg_color:true}"></p>


<!-- 第三种 -->
<p :class="{[box]:true,[bg_color]:true}"></p>


<!-- 第四种 以运算式作为属性值-->
<p :class="{[box]:5>3?true:false,[bg_color]:10>1}"></p>


<!-- 以数组形式添加类名 -->
<!-- 第一种 -->
<p :class="[box, bg_color]"></p>


<!-- 第二种 -->
<p :class="['box','bg_color']"></p>


<!-- 第三种 -->
<p :class="[flag?box:'box',bg_color]"></p>
</div>

<script>
new Vue({
el: '#app',
data: {
box: 'box',
bg_color: 'bg_color',
flag: true
}
})
</script>

Vue给dom添加样式

样式的绑定：
v-bind: style = ""
1. 对象的形式
2. 数组的形式

<div id="app">
<!-- 对象形式-->
<p :style="{ width:'100px',height:'100px',background:size.background }"></p>


<!-- 数组形式-->
<p v-bind:style="[{width:'100px',height:size.height},{background:size.background}]"></p>
</div>

new Vue({
el: '#app',
data: {
size: {
width: '100px',
height: '100px',
background: 'red'
}
}
})

Vue的事件添加

回顾：

问题： javascript事件添加有几种形式？

1. 事件绑定

dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function（）{} 事件处理函数

2. 事件监听 ： addeventListener

3. 直接在标签中绑定事件
<div onclick = "事件名称"></div>

vue采用了第三种，也是通过属性的形式绑定在dom身上
<div v-on:click = "事件名称"></div>

事件： v-on使用

事件源
事件绑定形式
事件类型
事件处理程序

v-on:eventType = " handlerName "
简写 v-on: --- > @

<div id="app">
<button v-on:click = "helloHandler"> 点击 </button>
<button @click = "helloHandler"> 点击 </button>
</div>


var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler () {
alert( 'hello' )
}
}
})


回顾：

问题： 函数调用有哪些方法？
直接调用 ()
事件调用

<div id="app">
<button v-on:click = "helloHandler( 100 )"> 点击 </button>
<button @click = "helloHandler( 200 )"> 点击 </button>
</div>

var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler ( num ) {
alert( num )
}
}
})

事件对象也可以正常使用， 在事件处理程序中， 写e就可以了

<div id="app">
<button v-on:click = "helloHandler"> 点击 </button>
<button @click = "helloHandler"> 点击 </button>
</div>

var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler ( e ) {
console.log( e )
}
}
})

在控制台会输出一个事件对象：



问题： 

如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现？

分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

<div id="app">
<button v-on:click="helloHolder(10,20)">点击</button> // 第三个参数不传
<button @click="helloHolder">点我</button>
</div>

var vm = new Vue({
el: '#app',
methods: {
helloHolder(a, b, e) {
console.log(a);
console.log(b);
console.log(e);

        }
    }
})

结果：


解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

<div id="app">
<button v-on:click = "helloHandler"> 点击 </button>
<button @click = "helloHandler( 10,20,$event)"> 点击 </button>
</div>


var vm = new Vue({
el: '#app',
methods: {
helloHolder(a, b, e) {
console.log(a);
console.log(b);
console.log(e);
        }
    }
})


业务： 点击这个按钮，添加或删除一条新的数据放在列表数据中

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
</div>

new Vue({
el: '#app',
data: {
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({// this 指代的是new出来的Vue对象
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
}
}


})

问题1： 下标是不能检测变动的，但是我们现在看到了它检测到了

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
<button @click="indexHandle">修改第二条数据</button>


</div>

new Vue({
el: '#app',
data: {
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
},
indexHandle() {
this.lists[1].task = '撸猫'
}
}


})



问题2： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
<button @click="indexHandle">修改第二条数据</button>
<button @click="clearLists">清空列表</button>




</div>

new Vue({
el: '#app',
data: {
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
},
indexHandle() {
this.lists[1].task = '撸猫'
},
clearLists() {
this.lists.length = 0
}
}

})



解决方法 ： 使用splice

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
<button @click="indexHandle">修改第二条数据</button>
<button @click="clearLists">清空列表</button>

</div>

new Vue({
el: '#app',
data: {
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
},
indexHandle() {
this.lists[1].task = '撸猫'
},
clearLists() {
// this.lists.length = 0
this.lists.splice(0)
}
}


})


问题3： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
<li v-for="item in array">
<p>{{item}}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
<button @click="indexHandle">修改第二条数据</button>
<button @click="clearLists">清空列表</button>
<button @click="changeArray">改变数组</button>

</div>

new Vue({
el: '#app',
data: {
array: [1, 2, 3],
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
},
indexHandle() {
this.lists[1].task = '撸猫'
},
clearLists() {
// this.lists.length = 0
this.lists.splice(0)
},
changeArray() {
this.array[1] = '你好'
}
}

})


解决方法： 使用 Vue.set / this.$set

<div id="app">
<ul>
<li v-for="item in lists" :key="item.id">
<p>{{ item.task }}</p>
</li>
<li v-for="item in array">
<p>{{item}}</p>
</li>
</ul>
<button v-on:click="add">添加</button>
<button @click="remove">删除</button>
<button @click="indexHandle">修改第二条数据</button>
<button @click="clearLists">清空列表</button>
<button @click="changeArray">改变数组</button>


</div>

new Vue({
el: '#app',
data: {
array: [1, 2, 3],
lists: [{
id: 1,
task: '打球'
}, {
id: 2,
task: '跑步'
}]
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: '唱歌'
})
},
remove() {
this.lists.pop()
},
indexHandle() {
this.lists[1].task = '撸猫'
},
clearLists() {
// this.lists.length = 0
this.lists.splice(0)
},
changeArray() {
// this.array[1] = '你好'
// this.$set(this.array, '1', '你好')
Vue.set(this.array, '1', '你好')
}
}


})


v-model 

双向数据绑定
默认绑定value值
v-model应用于表单元素

<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>

new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})


�
ShirleyXuMM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE之实例绑定、文本插值、基本指令、语法糖
weixin_45626166的博客
10-09 453
数据绑定与Vue案例 ** 该案例展示了Vue.js最核心的功能：数据的双向绑定** <div class="app"> <input type="text" placdholder="请输入你的姓名"> <h1>"你好" {{name}} </h1> </div> new Vue({ e...
vue学习总结一(vue指令和vue常用概念:语法糖,生命周期,过滤器)
庚中
03-19 966
一.vue指令总结: 1.v-text 作用:渲染内容,它不会解析html标签; 写法: 1.v-text=‘内容’ : 替换全部内容; 2.{{内容}} :只替换占位的位置(常用); 2.v-html 作用:渲染内容,它会解析html标签(不常用,因为直接解析来源不明的代码,可能会出现安全问题); 写法: v-html=“内容” :会替换全部内容; 3.v-show和v-if 作用:两者都可以...
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 5972
详解Vue中的事件绑定
Vue.js---指令与事件、语法糖
吴声子夜歌的博客
10-08 1275
指令与事件 指令（Directives）是Vue.js模板中最常用的一项功能，它带有前缀v-，指令的职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。 v-if: <div id="app"> <p v-if="show">显示这段文本</p> </div> <script> var app = new Vue...
vue事件绑定
leva的博客
02-08 1479
Vue提供了v-on指令来监听DOM事件，在事件绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。
Vue基础知识(二) : 事件绑定
AfraidWhat的博客
02-19 1398
一 丶事件绑定指令,v-on 基本语法 : v-on:事件名称 可优化为 : @事件名称 代码演示 : <!-- vue中的事件绑定使用的是 v-on --> <!-- 语法 v-on:事件名称 ,也可以优化成 @事件名称 --> <div id="app"> <!-- 分别给h1与div添加点击事件 --> <h1 v-on:click="say">点击事件</h1>
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
又一款MVVM组件 Vue基础语法和常用指令（1）
11-29
前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实...
Vue自定义指令写法与个人理解
01-19
它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用. 如果你正在使用Vue(或者Angular), 你可能...
vue入门基础语法基本使用以及组件配置安装教程.zip
最新发布
05-15
以下是一个关于 Vue.js 入门基础语法、基本使用以及组件配置和安装的简要教程 1. Vue.js 基础语法和基本使用 数据绑定 指令 事件处理 2. 组件配置和安装 全局组件注册 局部组件注册 使用 Vue CLI 搭建项目并安装组件...
vue中的语法糖
JINGinC的博客
09-29 8299
这里写自定义目录标题 一、什么是语法糖？ 语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。 使用语法糖可以简化代码，更便于程序员开发。 二、VUE中语法糖有
vue3语法糖详解（setup()、＜script setup＞）
夜空孤狼啸的博客
07-17 3238
vue3语法详解（setup()、＜script setup＞）
【Vue3】一文看懂vue3单文件组件的语法糖＜script setup＞
书呆子ITme
08-04 4625
vue setup单文件组件 (SFC) 中使用组合式 API 的编译时语法糖总结。
vue基础总结 (全局组件和全局指令 v-model语法糖 )
m0_57262819的博客
05-15 333
** 全局组件: 如何让组件,设置为全局的组件: 在入口文件里面引入这个组件 Vue.compoent("组件名", 组件名) ** 全局指令 ** 在一个简单的命令,重复使用的情况下 比如输入框的自动聚焦 Vue.durective( "'focus'" ,{ inserted(el){ el.focus() }} ) 使用自定义属性 > 定义事件类型 > inserted (el
vue3.2中setup语法糖
A_ordinary_day的博客
12-17 8489
**1.**什么是setup语法糖？怎么使用？最开始Vue3.0 暴露变量方法必须 return 出来，template中才能使用；现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。 <template> <my-component :num="num" @click="addNum" /> </template&g
关于Vue中的语法糖
AirrrNinety9的博客
04-03 2052
语法糖的定义 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。（来自百度百科） vue中的语法糖 在学习Vue的过程中，经常会看到一些语法糖，很有意...
Vue基础语法：属性绑定、事件绑定、表单控件、计算属性
洪布斯的博客
12-03 1261
1、属性绑定 <style> .color { color: red; } .ftred { color: red; font-size: 22px; } </style> 属性绑定指令v-bind，可以简写为...
Vue事件绑定原理
WindrunnerMax
09-07 4366
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符，基本流程是进行模板编译生成AST，生成render函数后并执行得到VNode，VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。 描述 v-on与@用于绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略，用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件，在监听原生DOM事
vue学习 12指令v-for
Shelly Long的博客
04-09 499
v-for="(item, index) in arr",其中item就是arr中的每个值,index是每个元素的索引（0开始）。 若item是对象，则item.对应的属性名； 如果v-for绑定的DOM对象是template标签（<template v-for="(item, index) in arr">），则template标签不会被渲染在html文档中 ...
vue3基础语法学习文档
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板...这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值