Vue草稿

Vue学习笔记

1.概述、特征、以及初始化

• Vue 是一种灵活的渐进式相应框架
• 采用声明式的编程范式
  引用Vue的方法

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
    
      el: '#app', //用于挂载需要挂载的元素
      data: {
    
        message: 'fuck you'
      }
    })
  </script>
  

通过采用el挂载和HTML代码定义id的方式来使用Vue.
data是vue实例对应的数据对象
methods定义属于vue的一些方法，可以再其他地方调用，也可以在指令中使用

2. 创建、显示、更新列表

<div id="app">
    <ul>
      <li v-for="item in movies">{
  {item}}</li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
      el: '#app',
      data: {
    
        message: 'ssda',
        movies: ['星际穿越', '大话西游', '少年派'],
      }
    })
  </script>

声明式的编程范式，使得列表操作变得简易。

3.案例：计数器

包含新的指令，v-on 和新的属性 methods，可以通过函数的形式来匹配复杂的操作

 <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
      el: '#app',
      data: {
    
        counter: 0
      },
      methods: {
    
        add: function () {
    
          console.log('+++')
          this.counter++
        },
        sub: function () {
    
          console.log('---')
          this.counter--
        }

      },
    })
  </script>

此处 v-on:click 可以用语法糖 @click 来替代。

4.关于插值的操作

mustache 语法

 <h2>{
  {message}}, 李银河！</h2>
 <h2>{
  {firstName + lastName}}</h2>

mustache语法中不仅可以写变量，亦可以写简单的表达式。

v-once 指令

表示页面的元素和组件只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{
  {message}}</h2>

v-for 指令
表示循环元素或组件中的内容，后接表达式。

<ul>
  <li v-for="item in movies">{
  {item}}</li>
</ul>

v-html 指令
表示有选择性地解析html中的内容

<h2 v-html='url'>{
  {url}}</h2>

v-text 指令

<h2 v-text='message'>，栗子</h2>

表示显示指定的数据，但是很不灵活，会直接覆盖原标签内的数据，而且不支持拼接等操作。
该指令用得不多

v-pre 指令

<h2 v-pre>{
  {message}}</h2>

表示原封不动地显示标签内的内容，而不会对其进行解析。
该指令用得不多

v-cloak 指令
一般用来消除抖动

<style>
    [v-cloak] {
    
      display: none
    }
</style>

  <div id="app">
    <h2 v-cloak>{
  {message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 由于 v-cloak 在被解析之后会被删除，所以
    // 在vue解析之前，div中有v-cloak属性
    // 在vue解析之后，div中没有v-cloak
    setTimeout(function () {
    
      const app = new Vue({
    
        el: '#app',
        data: {
    
          message: '你好'
        }
      })
    }, 1000)
  </script>

5.v-bind 数据绑定

v-bind 的基本使用
绑定属性

<img v-bind:src='imgURL' alt="谷歌">
<a v-bind:href="ahref">百度一下</a>

v-bind 语法糖

<a :href="ahref">百度一下</a>

实际上是省略了v-bind指令。

v-bind 绑定到class有两种方式 对象语法和数组语法
用法一 可以直接通过{}绑定一个类
用法二 可以通过判断传入多个值
用法三 和普通的类同时存在，并不冲突

v-bind 绑定到class(对象语法)
此案例添加了一个按钮，并设置了一个监听事件，使得点击按钮时改变绑定到<h2>的class中的布尔值，从而实现对样式的改变。

<div id='app'>
    <h2 v-bind:class='{active: isActive, line: isLine}'>{
  {message}}</h2>
    <button v-on:click='btnClick'>按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        isActive: true,
        isLine: false,
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        }
      }
    })

v-bind 绑定到class(数组语法)

<div id='app'>
    <h2 class="title" :class="[active, line]">{
  {message}}</h2>
    <h2 class="title" :class="getClasses()">{
  {message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
      el: '#app',
      data: {
    
        message: 'hello',
        active: 'one',
        line: 'two'
      },
      methods: {
    
        getClasses: function () {
    
          return [this.active, this.line]
        }
      }
    })
  </script>

v-bind 动态绑定style(对象语法)

原理大致相同，引号后面改成style即可。

<div id='app'>
    <!-- <h2 v-bind:style='{属性名:属性值}'>{
   {message}}</h2> -->
    <!-- <h2 v-bind:style='{fontSize: theSize + "px", color: theColor}'>{
   {message}}</h2> -->