Vue基础知识-优快云博客

本文介绍了Vue框架，它基于MVVM模式，目标是实现响应的数据绑定和组合视图组件。阐述了Vue的基本用法、常用指令，如v-bind、v-on等，还说明了如何用Vue控制html内容、设置元素的class和style属性，以及事件绑定和处理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

Vue是基于MVVM模式实现的一套js框架（函数库），Vue.js的目标是尽可能简单实现响应的数据绑定和组合的试图组件
小知识：
1.{{两个大括号之间不能有空格
2.vue的代码一般写在要控制的标签下面

1.基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    //引入Vue.js
    <script src="./js/vue.js"></script>
</head>
<body>
	<!-- 胡子语法{{data}} -->
 	<div id='app'>{{str}}</div>
    <script>
        var vm = new Vue({
            // Vue要控制的标签
            el: '#app',
            // Vue要绑定的数据
            data: {
                str: 'hello '
            }
        })
    </script>
</body>
</html>

2.指令

常用指令
v-bind:设置元素的class属性或者sytle属性
v-on:监听 DOM 事件，并在触发时运行一些 JavaScript 代码
v-if:可以控制元素的创建或者销毁
v-else:表示 v-if 的“else 块”
v-else-if:v-if 的“else-if 块”
v-show:显示和隐藏元素样式，元素一直是存在的
v-for:将一组数据渲染到页面中
v-model：在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

3.Vue控制html内容

<body>
    <div id="app">
    <!--插入html内容 -->
        <div>{{ str }}</div>
        <!-- 插入的值当中还可以写表达式 -->
        <p>{{ str.split('').reverse().join('') }}</p>
        <span>{{ num+1 }}</span>
        <!--  三元表达式 条件?条件成立:条件不成立-->
        <div>{{ bool?'成立':'不成立' }}</div>
        <!-- 标签的属性要使用值，需要写成使用v-bind指令：-->
        <a v-bind:href="url">链接文字</a>
         <!-- : 化简写法控制html属性 -->
        <a :href="url2">淘宝</a>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: 'abcdefg',
                num: 0,
                bool: false,
                url:'https://www.baidu.com',
                url2: 'http://www.taobao.com'
            }
        }
        )
    </script>
</body>

4.设置元素的class属性

使用v-bind指令来设置元素的class属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强

<!-- el  data: 只要数据变，页面视图就变 -->
  <div id="app">
      <!-- class属性可以是字典  对象  列表 -->
      <!-- 字典：{'类名' ： 布尔型数据}  true添加类  false不添加类 -->
      <div :class="{'myclass1': bool1, 'myclass2': bool2}">11111111111</div>
      <!-- 对象：key是真实的类名，如果取值true则添加类  -->
      <div :class="myobject">2222222</div>
      <!-- 列表：-->
      <div :class="[mynames1, mynames2]">33333333333</div>
      <div :class="[bool2?'abc':'jqk']">44444444</div>
  </div>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              bool1: true,
              bool2: false,
              myobject: {
                  class1: true,
                  class2: false
              },
              mynames1: 'aaa',
              mynames2: 'bbb'
          }
      })
  </script>

5.设置sytle属性

<div id="app">
     <!-- 字典 、对象 、列表 -->
     <div :style="{color:mycolor, fontSize:myfontSize}">11111111111</div>
     <div :style="myobject1">222222</div>
     <div :style="[myobject1, myobject2]">3333</div>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             mycolor: 'red',
             myfontSize: '60px',
             myobject1: {
                 color: 'blue',
                 fontSize: '100px'
             },
             myobject2: {
                 background: '#ccc'
             }
         }
     })
 </script>

6. 事件处理

事件绑定

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。

<div id="example-1">
 <!-- 在指令中写处理逻辑 -->
 <button v-on:click="counter += 1">Add 1</button>
 <p> {{ counter }}</p>
</div>
<script>
var example1 = new Vue({
 el: '#example-1',
 data: {
   counter: 0
 }
})
</script>

methods属性中指定处理函数：

<div id="example-2">
  <!-- greet 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function () {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
    }
  }
})
 </script>