vue的一些基本语法

最新推荐文章于 2024-07-14 11:16:56 发布

卡夫卡的小熊猫

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量87

点赞数

文章标签： vue.js html5

本文链接：https://blog.csdn.net/qq_43641110/article/details/120444204

版权

1.什么是vue

1.1 Vue的特点和Web开发中常见的高级功能

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

1.2 Vue.js安装

1.2.1 方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2.2 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

1.2.3 方式三：NPM安装

vue体验代码：

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h2>{{name}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)   const（常量）
        //编程范式：声明式编程
        //使数据和界面分离
        const app = new Vue({
            el : "#app",//用于挂载要管理的元素
            data : {  //定义数据
                message : 'hello',
                name : 'anna'
            }
        })
        //元素js的做法(编程范式：命令式编程)
        /*
        创建div元素，设置id属性
        定义一个变量叫message
        将message变量放在前面的div元素中显示
        修改message数据
        将修改后的数据在此替换到div元素中
         */
    </script>
</body>

1.3 Vue列表显示

<body>

<div id="app">
    <ul>
        <li v-for="item in name">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            message : 'hello',
            name : ['tom','anna']
        }
    })
</script>

</body>

1.4 创建Vue实例传入的options

el:

类型：string | HTMLElement

作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）

作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

1.5Vue的生命周期

1.6Vue中的mvvm

M： Model 数据模型

- 数据层

- 数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据

V: View 视图模板

- 视觉层

- 在前端开发中, 通常是DOM层

- 作用: 是给用户展示各种信息

VM： View-Model 视图模型

- 视图模型层

- 是View和Model沟通的桥梁

- 一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中

- 另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data

2.模板语法

2.1 Mustache 插值语法

mustache语法又叫双大括号语法，用于在页面中插入数据

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河!</h2>
<!-- Mustache: 胡子/胡须 -->
  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    },
  })
 
  // 模板语法指的就是：写代码时，按照规定好的方式来

2.2 v-once

v-once: 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的) 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>
<!-- v-once: 
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变 -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
  // 指令的本质就是自定义属性
</script>

2.3 v-html

某些情况下，从服务器请求到的数据本身就是一个HTML代码

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

如果希望解析出HTML展示，可以使用v-html指令，该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
<!-- v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染 -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

2.4 v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中 v-text通常情况下，接受一个string类型

<div id="app">
  <h2>{{message}}, 李银河!</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>
<!-- 
  v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
 -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

2.5 v-pre

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

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>
<!-- 
  v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
 -->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

2.6 v-cloak

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

cloak: 斗篷

<style>
    [v-cloak] {
      display: none;
    }
</style>
 
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <!-- 
  在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
cloak: 斗篷
需要和css一起搭配使用
v-cloak 指令用法
（1）插值表达式存在的问题：“闪动”
（2）如何解决该问题：使用v-cloak指令
（3）解决该问题的原理：先隐藏，替换好值之后再显示最终的值
 -->
  <script src="../js/vue.js"></script>
  <script>
    // 在vue解析之前, div中有一个属性v-cloak
    // 在vue解析之后, div中没有一个属性v-cloak
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        }
      })
    }, 1000)
  </script>

2.7 v-bind介绍

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

2.7.1 v-bind基础

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值在开发中

比如：图片的链接src、网站的链接href、动态绑定一些类、样式等等，或者通过Vue实例中的data绑定元素的src和href

2.7.2 v-bind语法糖

v-bind有一个对应的语法糖，也就是简写方式在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。简写方式如下：

<div id="app">
  <!-- 错误的做法 ： 这里不可以使用mustache语法 -->
  <!--  <img src="{{imgURL}}" alt="">  -->

  <!--  正确的做法：使用v-bind指令 -->
  <!-- 动态绑定属性，可以使用v-bind -->
  <img v-bind:src="imgURL" alt="">

  <a v-bind:href="baiduURL">百度一下</a>

</div>
<script src="../js/vue.js"></script>
<script>
  const  app = new Vue({
    el : '#app',
    data : {
      message : 'hello',
      imgURL : '../images/1111_1.png',
      baiduURL : 'http://www.baidu.com'
    }
  })
</script>

2.7.3 v-bind绑定class（一）

<div id="app">

<!--  <h2 class="active">{{message}}</h2>  -->
<!--  <h2 :class="active">{{message}}</h2>  -->

<!-- 花括号表示是一个对象 -->
<!--  <h2 :class="{类名:boolean,类名:boolean}">{{message}}</h2>   -->
<!--  不会覆盖  -->
  <h2 class="title" :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 : 'hello',
      isActive : true,
      isLine : true
    },
    methods : {
      btnclick : function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>

绑定class有两种方式：

对象语法

数组语法

2.7.4 v-bind绑定class（二）

绑定方式：

对象语法

对象语法的含义是:

class后面跟的是一个对象。

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

2.7.5 v-bind绑定class（三）

绑定方式：

数组语法

数组语法的含义是:

class后面跟的是一个数组。

数组语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

2.7.6 v-bind绑定style（一）

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

在写CSS属性名的时候，比如font-size，可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

对象语法

数组语法

2.8.7 v-bind绑定style（二）

绑定方式一：对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
	对象的key是CSS属性名称
	对象的value是具体赋的值，值可以来自于data中的属性

对象语法的含义是：class后面跟的是一个对象

对象语法有下面这些用法：

绑定方式二：数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型多个值以，分割即可

<div id="app">
<!--  <h2 :style="{key(css属性名):value(属性值}">{{message}}</h2>  -->
<!-- 在Vue中，属性值需要加引号来和变量区别，如果不加引号会被编译器翻译成变量，会报错 -->
<!-- key可以不加单引号，但value一定要加单引号 -->
  <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const  app = new Vue({
    el : '#app',
    data : {
      message : 'hello',
      finalSize : '50px',
      finalColor : 'plum'
    }
  })
</script>

<div id="app">
<!--  <h2 :style="{key(css属性名):value(属性值}">{{message}}</h2>  -->
<!-- 在Vue中，属性值需要加引号来和变量区别，如果不加引号会被编译器翻译成变量，会报错 -->
<!-- key可以不加单引号，但value一定要加单引号 -->
  <h2 :style="{fontSize:finalSize + 'px',color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const  app = new Vue({
    el : '#app',
    data : {
      message : 'hello',
      finalSize : 50,
      finalColor : 'plum'
    }
  })
</script>

<div id="app">
<!--  <h2 :style="{key(css属性名):value(属性值}">{{message}}</h2>  -->
<!-- 在Vue中，属性值需要加引号来和变量区别，如果不加引号会被编译器翻译成变量，会报错 -->
<!-- key可以不加单引号，但value一定要加单引号 -->
  <h2 :style="{fontSize:finalSize + 'px',color:finalColor}">{{message}}</h2>
  <h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const  app = new Vue({
    el : '#app',
    data : {
      message : 'hello',
      finalSize : 50,
      finalColor : 'plum'
    },
    methods : {
      getStyle : function () {
        return {fontSize:this.finalSize + 'px',color:this.finalColor}
      }
    }

  })
</script>

卡夫卡的小熊猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的一些基本语法

1.什么是vue1.1 Vue的特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM1.2 Vue.js安装1.2.1 方式一：直接CDN引入 <script src="htt...
复制链接

扫一扫