Vue 学习笔记(1)

Vue的基本使用

<!-- Vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>

方法	说明
{{变量}}	插值
v-text	让某个元素的文本内容和变量进行绑定
v-html	让某个元素的文本或标签与变量进行绑定
v-bind:属性名=变量	让某个元素与变量进行绑定
v-model	让某个元素与变量进行双向绑定
v-on:事件名=函数名	让某个元素与函数进行绑定
v-on:事件名=函数名(参数)	让某个元素与函数进行绑定，同时传递参数
v-on:事件名=函数名($event)	让某个元素与函数进行绑定，同时传递事件对象
v-on:事件名=函数名($event,参数)	让某个元素与函数进行绑定，同时传递事件对象和参数
v-on:事件名=函数名($event,参数1,参数2)	让某个元素与函数进行绑定，同时传递事件对象和多个参数
v-show=变量	让某个元素与变量进行绑定，变量为true时显示，变量为false时隐藏
v-if=变量	让某个元素与变量进行绑定，变量为true时显示，变量为false时不显示
v-sole=变量	让某个元素与变量进行绑定，变量为true时显示，变量为false时不显示，且不占据空间
v-slot:插槽名	让某个元素与插槽进行绑定
v-for=”变量 in 数组”	让某个元素与数组进行绑定
v-for=”变量 in 对象”	让某个元素与对象进行绑定
v-for=”变量 in 数组” :key=”变量”	让某个元素与数组进行绑定，同时为每个元素设置唯一的key值
v-else	让某个元素与v-if进行绑定，当v-if为false时显示
v-if和v-else	让某个元素与v-if和v-else进行绑定，当v-if为true时显示，当v-if为false时显示v-else
v-else-if	让某个元素与v-if和v-else-if进行绑定，当v-if为true时显示，当v-if为false时显示v-else-if
v-cloak	让某个元素与v-cloak进行绑定，当Vue实例加载完成后，会自动移除v-cloak
v-memo=变量	让某个元素与变量进行绑定，当变量发生变化时，才会重新渲染
v-once	让某个元素与v-once进行绑定，只渲染一次

使用1

new Vue({
    el :'#app',  //ID选择器
    data: {
        message: 'Hello Vue!'
    }
})

<!--引用Vue参数-->
<h1 id="app"> { { message } }</h1>

使用2

new Vue({
    el :'body>div',  //Path选择器
    data: {
        message: 'Hello Vue!'
    }
})

<!--引用Vue参数-->
<body>
    <div> { { message } }</div>
</body>

自定义代码模板

·(Mac版本)
|---Preferences
|---Editor
    |---Live Templates
        |---"+"  
        |---Abbreviation: vue
        |---Description:描述说明
        |---Template text:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>(模板)
|---Change
|---OK

Vue 学习笔记(1)

Vue Learn Note(1)

Vue的基本使用

自定义代码模板

CATALOG

FEATURED TAGS

FRIENDS