Vue学习笔记

1. vuecli与vue版本

vuecli4.5以上支持vue3,创建工程时可以选择使用vue2

2. vue ui命令

创建好工程后,使用vue ui可使用内置GUI工具安装依赖或build等操作

3. 运行依赖与开发依赖

运行依赖(dependencies),对应命令npm install module_name --save,最基本的依赖,插件会被打包发布到生产环境,如:axios、vue、vuex

开发依赖(devDependencies),对应命令npm install module_name --save-dev,插件只用于开发环境,线上不需要使用的依赖,如:babel-plugin--loader

4. 一次性插值

使用v-once指令

<span v-once>这个将不会改变: {{ msg }}</span>

5. 解释输出html

使用v-html指令

<span v-html="rawHtml"></span>

6. 事件修饰符

修饰符stop可组织冒泡,触发父级click1方法

<div @click="click1">
    <div @click.stop="click2">
        click me
    </div>
</div>

7. 数组和对象列表渲染

数据渲染

items = [{message: Foo}, {message: Bar}]
<p v-for="item,index in items" :key="index">{{item.message}}</p>

对象渲染

obj = {title: 'vue', author: 'echeverra'}
<p v-for="value,key in obj" :key="key">{{value}}</p>

8. 传递自身元素参数

传递事件变量$event,$event.target获取传递元素

<div v-on:click="greet($event)">click</div>

9. 表单值与事件

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用 checked property 和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

10. 单选框

勾选checked值为true,不勾选checked值为false

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

持续更新中...

文章首发于我的博客 https://echeverra.cn/vue,原创文章,转载请注明出处。
欢迎关注我的微信公众号 echeverra,一起学习进步!不定时会有资源和福利相送哦!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇