Vue学习笔记(篇二)——Vue基础语法

Vue 基础语法

1、Mustache语法

形如"< h2 >{{message}}< h2 >"的语法格式,称之为Mustache语法

注:mustache(胡子/胡须)

2、v-once

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。

举例代码(练习):

  <div id="app">
    <h2>{{message}}h2>
    <h2 v-once>{{message}}h2>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '呵呵呵'
      },
      methods: {}
    });
  script>

3、v-html

如果我们直接通过{{}}来输出,会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。

如果我们希望解析出HTML展示

​ 可以使用v-html指令

​ 该指令后面往往会跟上一个string类型

​ 会将string的html解析出来并且进行渲染

  <div id="app">
    <h2>{{url}}h2>
    <h2 v-html="url">h2>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        url: '百度一下',
      },
      methods: {}
    });
  script>

4、v-text

v-text作用和Mustache比较相似:都是用于将数据显示在界面中

v-text通常情况下,接受一个string类型

  <div id="app">
    <h2>{{message}}h2>
    <h2 v-text="message">,刘大山!h2>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello',
      },
      methods: {}
    });
  script>

5、v-pre

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。

比如下面的代码:

​ 第一个h2元素中的内容会被编译解析出来对应的内容

​ 第二个h2元素中会直接显示{{message}}

  <div id="app">
    <h1>{{message}}h1>
    <h1 v-pre>{{message}}h1>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      },
      methods: {}
    });
  script>

6、v-cloak

在某些情况下,我们浏览器可能会直接显示出未编译的Mustache标签。

为了让为编译的mustache显示出来,可使用v-cloak.

这个感念不太容易理解,具体通过代码体现:

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style>
    [v-cloak]{
      display: none;
    }
  style>
head>

<body>

  <div id="app" v-cloak>
    <h1>{{message}}h1>
  div>
  <script src="../js/vue.js">script>
  <script>
    //在vue解析之前,div中又一个属性 v-vloak
    //在vue解析之后,div中没有一个属性 v-vloak
    setTimeout(() => {
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello',
        },
        methods: {}
      });
    }, 2000);
  script>

body>

7、v-bind

v-bind 用于绑定一个或多个属性值,或者向另一个组件传递props值

在开发中,需要动态绑定的属性例如:图片的链接src、网站的链接href、动态绑定一些类、样式等

例,通过vue实例中的data绑定元素的src和href:

  <div id="app">
    
    
    
    <img v-bind:src="imgUrl" alt="">
    <h1><a v-bind:href="baiduUrl">百度一下a>h1>
    
    <img :src="imgUrl" alt="">
    <h1><a :href="baiduUrl">百度一下a>h1>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://img14.360buyimg.com/seckillcms/s250x250_jfs/t1/184564/27/10546/72131/60d137c4Ecbe5e45f/30bcc8ad97d26ab4.jpg',
        baiduUrl: 'https://www.baidu.com'
      },
      methods: {
      }
    });
  script>
(1)v-bind绑定class

很多时候我们希望动态的来切换class,比如:

​ 当数据为某个状态时,字体显示红色。

​ 当数据另一个状态时,字体显示黑色。

绑定class有两种方式:

​ 对象语法

​ 数组语法

绑定方式:对象语法,对象向语法的含义是class后面跟的是一个对象

例:

用法一:直接通过{}绑定一个类
< h2 :class="{‘active’: isActive}">Hello World
用法二:也可以通过判断,传入多个值
< h2 :class="{‘active’: isActive, ‘line’: isLine}">Hello World
用法三:和普通的类同时存在,并不冲突

注:如果isActive和isLine都为true,那么会有title/active/line三个类
< h2 class=“title” :class="{‘active’: isActive, ‘line’: isLine}">Hello World
用法四:如果过于复杂,可以放在一个methods或者computed中

注:classes是一个计算属性
< h2 class=“title” :class=“classes”>Hello World< /h2>

绑定方式:数组语法,数组语法的含义是class后面跟的是一个数组

例:

用法一:直接通过{}绑定一个类

< h2 :class="[‘active’]">Hello World< /h2>

用法二:也可以传入多个值

Hello World

用法三:和普通的类同时存在,并不冲突

注:会有title/active/line三个类

< h2 class=“title” :class=“[‘active’, ‘line’]">Hello World

用法四:如果过于复杂,可以放在一个methods或者computed中

注:classes是一个计算属性

< h2 class=“title” :class=“classes”>Hello World

(2)v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候,比如font-size

​ 我们可以使用驼峰式 (camelCase) fontSize

​ 或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’

绑定stylle有两种方式:

​ 对象语法

​ 数组语法

绑定方式:数组语法

:style="{color: currentColor, fontSize: fontSize + ‘px’}"

​ style后面跟的是一个对象类型

​ 对象的key是CSS属性名称

​ 对象的value是具体赋的值,值可以来自于data中的属性

绑定方式二:数组语法

< div v-bind:style="[baseStyles, overridingStyles]">

style后面跟的是一个数组类型
多个值以,分割即可

8、计算属性

我们知道,在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示

​ 比如我们有firstName和lastName两个变量,我们需要显示完整的名称。

​ 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性:

​ OK,我们发现计算属性是写在实例的computed选项中的。

例举:

  <div id="app">
    <h2 :style='{backgroundColor: "wheat"}'>{{firstName+'  '+lastName}}h2>
    <h2 :style='{backgroundColor: "pink"}'>{{getFullName()}}h2>
    <h2 :style='{backgroundColor: "tomato"}'>{{fullName}}h2>
  div>

  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Join',
      },
      //计算属性
      computed:{
        fullName: function(){
          return this.firstName+" "+this.lastName;
        }
      },
      methods: {
        getFullName: function(){
          return this.firstName+ " " +this.lastName;
        }
      }
    });
  script>

计算属性中也可以进行一些更加复杂的操作,比如:

  • {{show(index)}}

总价为:{{totalPrice}}元

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

​ 在上面的例子中,我们只是使用getter来读取。

​ 在某些情况下,你也可以提供一个setter方法(不常用)。

​ 在需要写setter的时候,代码如下:

  <div id="app">
    <h2>{{fullName}}h2>
  div>
  <script src="../js/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Join',
        lastName: 'Jim'
      },
      methods: {
      },
      computed: {
        // 原来的形式
        // fullName: function(){
        //   return this.firstName+' '+lastName;
        // }
        // 标准型形式
        // 计算属性一般是没有set方法,只读属性
        fullName: {
          set: function(value){
            console.log("我被重新赋值了!!!", value);
            let names = value.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
          },
          get: function(){
            return this.firstName+" "+this.lastName;
          }
        }
      }
    });
  script>
计算属性的缓存

我们可能会考虑这样的一个问题:

​ methods和computed看起来都可以实现我们的功能,

​ 那么为什么还要多一个计算属性这个东西呢?

​ 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。

我们来看下面的代码:

  <div id="app">
    
    

{{firstName}} {{lastName}}h2>

{{getFullName()}}h2>

{{getFullName()}}h2>

{{getFullName()}}h2>

{{getFullName()}}h2>

{{fullName}}h2>

{{fullName}}h2>

{{fullName}}h2>

{{fullName}}h2> div> <script src="../js/vue.js">script> <script> const app = new Vue({ el: '#app', data: { firstName: 'Join', lastName: 'Marry' }, methods: { getFullName: function(){ // 被调用四次 console.log("getFullName"); return this.firstName+ ' ' +this.lastName; } }, computed: { fullName: { get: function(){ // 被调用一次 console.log("fullName"); return this.firstName+ ' ' +this.lastName; } } } }); script>

9、事件监听

在前端开发中,我们需要经常和用于交互。

这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等

(1)v-on

这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用

​ 下面的代码中,我们使用了v-on:click="counter++”

​ 另外,我们可以将事件指向一个在methods中定义的函数

你可能感兴趣的:(Vue.js,学习笔记,vue.js,学习,javascript)