初学vue时，并不推荐刚开始就直接学习使用脚手架搭建vue项目，而是先学习基础的语法，然后再去学习工程化后搭建项目。

引入vue

引入vue有两种方式：

  1. 通过script标签的方式直接引入网上获取的 vue源码
  2. 把源码下载到本地，然后再通过script标签的方式引入。
        

          
            
            HTML
          
          
        

        

          
12

          <!-- 这里使用最新版本的vue2.7.16, 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

或者我们在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。打开它，然后复制所有代码存入到一个.js后缀的文件中。

        

          
            
            HTML
          
          
        

        

          
1

          <script src="./js/vue.2.7.16.js"></script>
        

      
        

          
            
            HTML
          
          
        

        

          
123456789101112131415161718192021222324252627

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue初识</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello world'
                }
            }
        })
    </script>
</body>

</html>
vue初识
vue初识

看，一个 vue 页面就跑起来了，是不是很简单！

这段代码是一个简单的HTML页面，

  1. const app = new Vue() 创建了一个 Vue 实例，
  2. el 属性指定了页面中的元素 id 为 app 的 div 元素作为 Vue 实例的根元素
  3. data() 方法定义了一个数据对象，属性绑定了 message 变量，{{ message }} 插值表达式将变量的值插入到 div 元素中，这样我们只需要修改 message 变量的值，页面中的内容就会自动更新。

插值表达式

        

          
            
            HTML
          
          
        

        

          
123

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

      
        

          
            
            JavaScript
          
          
        

        

          
123456

          var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

定义一个message变量，在页面中通过{{message}}显示

指令

v-bind

html属性，不管是标签本身自有的属性，还是自定义的属性，都可以通过v-bind指令绑定到html元素上。v-bind指令可以缩写为:

        

          
            
            HTML
          
          
        

        

          
123

          <a v-bind:href="url">v-bind:绑定指令</a>
<a :href="url">v-bind:绑定指令</a>
<span :title="title"></span>
        

      
        

          
            
            JavaScript
          
          
        

        

          
1234567

          var app = new Vue({
    el: '#app',
    data: {
        url: 'https://zhangwurui.cn',
        title: '页面加载于 ' + new Date().toLocaleString()
    }
})
数据绑定
数据绑定

v-for

        

          
            
            HTML
          
          
        

        

          
123

          <a v-for="(item, i) in list" :key="i">
    {{item}}
</a>
        

      
        

          
            
            JavaScript
          
          
        

        

          
12345678

          var app = new Vue({
    el: '#app',
    data() {
        return {
            list: ['HTML', 'CSS', 'JS', 'Vue']
        }
    }
})

v-on

事件方法需要写在Vue实例的methods中，然后通过v-on:绑定事件，v-on:可以缩写为@

        

          
            
            HTML
          
          
        

        

          
123456

          <a v-for="(item, i) in list" :key="i" v-on:click="handleClick">
    {{item}}
</a>
<a v-for="(item, i) in list" :key="i" @click="handleClick">
    {{item}}
</a>
        

      
        

          
            
            JavaScript
          
          
        

        

          
12345678910111213

          var app = new Vue({
    el: '#app',
    data() {
        return {
            list: ['HTML', 'CSS', 'JS', 'Vue']
        }
    },
    methods: {
        handleClick() {
            alert('点击了')
        }
    }
})
点击事件
点击事件

v-if、v-else、v-show

        

          
            
            HTML
          
          
        

        

          
123

          <a v-if="show">显示哟</a>
<a v-else>不显示哟</a>
<a v-show="show">显示哟</a>
        

      
        

          
            
            JavaScript
          
          
        

        

          
12345678

          var app = new Vue({
    el: '#app',
    data() {
        return {
            show: true
        }
    }
})

v-html、v-text

通过 v-html 可以渲染 html标签, v-text 只能渲染文本，节点并不会被解析

        

          
            
            HTML
          
          
        

        

          
12

          <div v-html="message"></div>
<div v-text="message"></div>
        

      
        

          
            
            JavaScript
          
          
        

        

          
12345678

          var app = new Vue({
    el: '#app',
    data() {
        return {
            message: '<span style="color:red">我是红色</span>'
        }
    }
})
渲染
渲染

v-model

通过 v-model 可以实现数据双向绑定

        

          
            
            HTML
          
          
        

        

          
12345678

          <input type="text" v-model="message">
<span>{{ message }}</span>
<select name="" id="" v-model="selected">
    <option v-for="item in selectdList" :key="item.value" :value="item.value">
        {{ item.label }}
    </option>
</select>
<span>{{ selected }}</span>
        

      
        

          
            
            JavaScript
          
          
        

        

          
1234567891011121314151617181920

          var app = new Vue({
    el: '#app',
    data() {
        return {
            message: '',
            selected: '',
            selectdList: [
                {
                    label: '请选择', value: 'init'
                },
                {
                    label: '张三', value: 'zhangsan'
                },
                {
                    label: '李四', value: 'lisi'
                }
            ]
        }
    }
})
双向绑定
双向绑定

修饰符

  1. .lazy：失去焦点时才触发事件
  2. .number：将值转为数字类型
  3. .trim：去除首尾空格
  4. .stop：阻止冒泡
  5. .prevent：阻止默认事件
  6. .capture：事件捕获
  7. .self：事件源为当前元素时才触发事件
  8. .once：事件只触发一次
  9. .passive：事件处理函数在事件捕获阶段执行
  10. .native：监听组件根元素的原生事件

用法

        

          
            
            HTML
          
          
        

        

          
12345

          <input type="text" v-model.trim="message">
<input type="text" v-model.number="message">
<button @click.prevent="handleClick">点击</button>
<button @click.stop="handleClick">点击</button>
<button @click.self="handleClick">点击</button>