vue | 易学教程

A:vue介绍

vue：是一套渐进式前端框架
1:渐进式框架：意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。

2:框架和库的区别：
a*：框架：字面上理解为架子，为用户提供一整套解决方案，必须按照他的规则来写；
b库：像函数一样，只需要调用他的方法，怎样组织由自己决定；

3:模板插值
vue使用双大括号语法来进行文本插值

<div id="app">
 {{ message }}
</div>

4:构造器
每个vue应用都是通过构造函数vue来创造vue的根实例，实例化是需要传入数据，模板，挂载元素，方法，声明周期等。

new Vue({
 // 挂载元素
 el: '#app',
 // 数据
 data: {
 message: 'Hello Vue!'
 }
});

5:数据绑定

<body>
 <div id="app">
 <!-- Hello Vue! -->
 {{ message }}
 </div>
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 <script>
 //将vue保存下来，方便后面改变数据
 const vm = new Vue({
 el: '#app',
 data: {
         message: 'Hello Vue!'
      }
 })
 </script>
</body>

6:声明周期
实例在创建阶段，挂载的事件监听，并实时更新

B:模板语法

1:插值

a：文本
数据绑定最常见的形式就是 (双大括号) 的文本插值：
通过使用 v-once 指令，插值后数据改变，不会更新

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

b：原始HTML
{{}}会将数据解析为文本，而非html，要输出html要通过v-html

<div>{{htmlCode}}</div>
 <div v-html="htmlCode"></div>
 打印：
 '<span style="color:red">this is a test</span>
 this is a test

c：特性
如果要控制属性，可以让属性和data值进行绑定，通过v-bind指令

 <div id="app">
 <div v-bind:id="one" v-bind:class="two"></div>//缩写：class       ：id
 </div>
 <script>
 const app = new Vue({
 el: '#app',
 data: {
 one: 'bcd',
 two: 'abc'
 }
 })
 </script>
 打印：
  <div v-bind:id="bcd" v-bind:class="abc"></div>

d：使用 JavaScript 表达式
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

C:计算属性和侦听器

1:计算属性

属性
模板的初衷是用于简单运算的，在模板中放太多逻辑难以维护，所以任何复杂逻辑，都应当使用计算属性。

<div id="app">
     <p> {{Mess}}</p>
 </div>
 <script>
 const data = {
 Mess: 'Hello Vue!'
 }
 const vm = new Vue({
 el: '#app',
 data: data,
   computed: {
              Mess: function () {
                  return this.message.split('').reverse().join('');
            }
       },
 });
 </script>
</body>

方法

<div id="app">
 <p>{{ message }}</p>
 <!-- Hello Vue! -->
 <p>{{ reverseMess() }}</p>
 <!-- !euV olleH -->
 </div>
<script>
 const data = {
      message: 'Hello Vue!'
 }
 const vm = new Vue({
 el: '#app',
 data: data,
 methods: {
 reverseMess: function () {
 return this.message.split('').reverse().join('')
         }
     }
 });
 </script>

属性和方法的区别
计算属性只有在它相关依赖发生改变时才会重新求值，方法只要发生重新渲染，method调用会执行所有函数。

a:计算属性的 setter

computed: {
              fullName: {
                  // getter
                  get: function () {
                      return this.firstName + ’ ’ + this.lastName
                  },
                  // setter
                  set: function (newValue) {
                      var names = newValue.split(’ ')
                      this.firstName = names[0]
                      this.lastName = names[names.length - 1]
                  }
              }
          }

2:数据观察

提供watch来观察和响应data数据的变动

   <div id="app">
        <p @click=a++>{{a}}</p> 
    </div>

  const vm = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            watch: {
                a: function(val, oldVal) {
                this.message = '新' + oldVal + '旧' + val;
            }
        }

除watch以外$watch也可以监听数据的变动，会返回一个函数，用来停止触发回调

   <div id="app">
        <p @click=a++>{{a}}</p> 
    </div>

 const vm = new Vue({
            el: '#app',
            data: {
                a: 1
            },

        });
        const w = vm.$watch('a', function (one, old) {
            console.log("新值" + one);
            console.log("旧值" + old);

            if (one === 10) {
                w();
            }
        })

D:Class 与 Style 绑定

绑定 HTML Class

对象语法

 <!-- <p :class="example">Lorem ipsum dolor sit.</p> -->
    const vm = new Vue({
            el: '#app',
            data: {
                example: {
                    abc:true,
                    bcd:true,
                    def:false,
                }
            },
        })

数组语法

    <p :style="[test1,test2]">Lorem ipsum dolor sit amet.</p>
     const vm = new Vue({
            el: '#app',
            data: {
                test: {
                    color: "skyblue",
                    fontSize: "20px"

                },
                test1: {
                    color: "green",
                },
                test2: {
                    fontSize: "18px",
                }
            },

        })

绑定内联样式

对象语法

     <div v-bind:style="test">Lorem ipsum dolor sit amet.</div>
     
     const vm = new Vue({
            el: '#app',
            data: {
                test: {
                    color: "skyblue",
                    fontSize: "20px"
                },
            },
        })

数组语法

     <div v-bind:style="[style1, style2]">Lorem ipsum dolor.</di>
     const vm = new Vue({
            el: '#app',
            data: {
                style1: {
                    color: "skyblue",
                    fontSize: "20px"

                },
                style2: {
                    color: "green",
                },
            },
        })

E:条件渲染

v-if指令

<h1 v-if="one">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>

在元素上使用 v-if 条件渲染分组

<template v-if="one">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else指令

<div v-else>
 hello
</div>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

用 key 管理元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。如果不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

来源：CSDN

作者：keep,moving

链接：https://blog.csdn.net/KeepMoving_ch/article/details/103477532

标签

vue

const

app