Vue入门

官方: guide
官方: api

目录

1. Vue 元素

bilibili: 4个小时带你快速入门vue

1.1. el: 挂载点

  • vue实例的作用范围：el命中的元素及其内部的后代元素
  • 可以使用CSS选择器，但推荐使用ID选择器(#id)
  • 可以使用的dom元素：双标签，但不包括 <html> 和 <body>。

1.2. data: 数据对象

也支持list与dict(对象)的数据格式：

1.3. v-text

用于设置标签的文本值。

  • 属性 v-text=xxx 写法会替换全部内容，且会忽略标签value设置的字符：

    <h2 v-text="message">内容如下</h2> : 这里无法显示中文内容。

  • 通过 插值表达式 {{ var }} 形式可以替换指定内容。

    <h2>差值表达式：{{ message }}</h2> : 可以显示中文

  • 支持表达式（例如字符串拼接）：

    <h2 v-text="message + '!!' "></h2>

1.4. v-html

用于显示特定的html结构内容（即，将内容作为html渲染，而非普通文字显示）。

1.5. v-on

官网

为元素绑定事件。

  • 语法糖： @ == v-on:
  • 绑定的方法定义在 methods 属性中
  • 方法内部可以通过 this 关键字访问data数据元素

传递自定义参数：

事件修饰符：

事件的后面跟上 .修饰符 可以对事件进行限制，例如： keyup.enter 表示按下Enter键才会触发事件。

  • stop - 调用 event.stopPropagation()。
  • prevent - 调用 event.preventDefault()。
  • capture - 添加事件侦听器时使用 capture 模式。
  • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • native - 监听组件根元素的原生事件。
  • once - 只触发一次回调。
  • left - (2.2.0) 只当点击鼠标左键时触发。
  • right - (2.2.0) 只当点击鼠标右键时触发。
  • middle - (2.2.0) 只当点击鼠标中键时触发。
  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

1.6. v-show

根据表达式的bool，切换元素的显示与隐藏（控制display）。

1.7. v-if

根据表达式的bool，切换元素的显示与隐藏（操纵dom元素）。即表达式false时，元素会从dom中移除。

1.8. v-bind

设置元素的属性。

语法糖： : == v-bind:

1.9. v-for

迭代list/dict对象：v-for="{xxx, idx} in arr"

1.10. v-model

获取并设置 表单元素 的值（双向数据绑定）。

bilibili: 双向绑定原理

1.11. computed

bilibili: vue计算属性

2. vue-cli脚手架（基于2.0）

bilibili: SRC文件流程和根组件App

2.1. App.vue 文件结构

  • <template>: 模板html结构

    <template>
<div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

  • <script>: 行为逻辑

    <script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'app',
components: {
    HelloWorld
}
}
</script>

  • <style>: 样式

    <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

2.2. 组件嵌套

bilibili: 组件嵌套

posted @ 2020-11-09 18:40  brt2  阅读(106)  评论(0)  编辑  收藏  举报