Vue

Notes for Vue

• https://vuetifyjs.com/zh-Hans/components/alerts/
• https://vuetifyjs.com/en/components/alerts/

参考： https://www.runoob.com/vue2/vue-if.html 作用： 控制可见性，是否插入对应的标签

• 相关指令

  • v-else
  • v-else-if

• 相似指令

  • v-show

控制可见性，是否插入对应的标签

循环，重复插入标签

• 使用方式

  • v-for="site in sites"

    • sites 是列表，数组

  • v-for="value in object"

    • object 是一个对象
    • 遍历对象的值，注意不是 key
  • v-for="(value, key) in object"
  • v-for="(value, key, index) in object"

  • v-for="n in 10"

    • n –> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

• eg:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>

把 html 的标签属性，绑定到 vue object 的 property

• eg: <a v-bind:href="url">…</a>

  • 把 <a> 元素的 href 属性绑定到 相关的 vue object 的 url 属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="static" v-bind:class="{'active': isActive, 'text_danger': hasError}">
</div>
// class='static active text_danger'


// * 另一种写法
<div id="app">
<div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        classObject: {
            active: true,
            'text-danger': true
        }
    }
})
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 内嵌写法
<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
// vue.activeColor, vue.fontSize

// 单个 style object
<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

// 多个 style object
<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

• 用途：用于监听事件
• 作用：把 javascript 函数绑定到 vue 模板的 事件上

• eg: <a v-on:click="doSomething">…</a>

  • 这里 click 是事件
  • 把 vue object 的方法，绑定到 click 事件

以 "v-" 开头的 vue 模板标签 属性

• eg: v-if, v-bind, v-on

https://vuejs.org/v2/guide/list.html

参考： https://blog.csdn.net/u013089490/article/details/83896439 作用： cards 卡片组件

• v-card-title
• v-card-text

• v-card-action

  • 按钮的容器

• v-card-media

  • 图片或视频的容器

• v-divider

  • <v-divider/>: 分割线

update template just one time, 只更新 template 模板的内容一次

vue 插入 html，

• 用法： <div v-html="vue_object_property"></div>

• 注：

  • 存在原因: vue 在“{{ msg }}” 中插入的是纯文本，不能是 html，
  • 所以，需要用 v-html 插入 html 文本

https://www.runoob.com/vue2/vue-template-syntax.html

• 用于表单

  • https://www.runoob.com/vue2/vue-forms.html
• 用于双向数据绑定，元素如：input, 用户输入的数据更新，

• eg: <input v-model="message">

  • 用户输入数据更新，对应 vue.message 也回被更新
  • vue.message 也是 input 元素展示的初始内容

• 实质：过滤函数

• eg:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

• 使用方式

  • 参数与过滤器使用 “|” 连接

https://www.runoob.com/vue2/vue-component.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div id="app">
  <child message="hello!"></child>
</div>

<script>
 // 注册
 Vue.component('child', {
     // 声明 props
     props: ['message'],
     // 同样也可以在 vm 实例中像 "this.message" 这样使用
     template: '<span>{{ message }}</span>'
 })
 // 创建根实例
 new Vue({
     el: '#app'
 })
</script>

• 入门

  • https://www.runoob.com/vue2/vue-routing.html

• 详细教程

  • https://www.jianshu.com/p/1a7bbdd8ca4e
  • https://www.jianshu.com/p/47a207618cbd

• Vuetify2.x学习笔记(叁)：栅格系统(grid)、标签(chips)、提示语(tooltip)、卡片(cards)、头像(avatar)_Pico…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

  <template>
      <div>
          <nav>
              <v-app-bar app flat>
                  <v-app-bar-nav-icon class="grey--text" @click="drawer=!drawer"></v-app-bar-nav-icon>

                  <v-toolbar-title class="text-uppercase grey--text">
                      <span class="font-weight-light">Hello</span>
                      <span>Piconjo</span>
                  </v-toolbar-title>

                  <v-spacer></v-spacer>
            
                  <v-btn outlined class="mx-2" color="grey">
                      <span>LoveU</span>
                      <v-icon right>favorite</v-icon>
                  </v-btn>
                  <v-btn outlined class="mx-2" color="grey">
                      <span>Login</span>
                      <v-icon right>lock</v-icon>
                  </v-btn>
              </v-app-bar>

              <v-navigation-drawer v-model="drawer" app class="indigo">
                  <p>Test</p>
              </v-navigation-drawer>
          </nav>
      </div>
  </template>

  <script>
  export default {
      data(){
          return {
              drawer:false
          }
      }
  }
  </script>

https://blog.csdn.net/Piconjo/article/details/105940855?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

• 相关标签

  • v-list
  • v-list-item
  • v-list-action
  • v-list-content

  • v-list-title

    1 2 3 4 5 6 7 8 9 10

    <v-list> <v-list-item> <v-list-item-action> <v-icon class="white--text">home</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title class="white--text">Homepage</v-list-item-title> </v-list-item-content> </v-list-item> </v-list>

https://www.cnblogs.com/qhantime/p/11410073.html

https://vuetifyjs.com/zh-Hans/components/alerts/ 警告弹窗

在 vue 中， 带 "@" 导入代表从根目录导入 https://www.cnblogs.com/heson/p/10517754.html

• @ 指的是 src 目录