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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <p1>欢迎{{user.username}}</p1>
    </div>
    <script>
        new Vue({
            el: '#app',  // 通过id指定要渲染的元素
            data: {
                title: '第一个vue程序',
                user: {
                    username: 'helen',
                    age: 25,
                },
            }
        })
    </script>
</body>

</html>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

            data: {
                title: '第一个vue程序',
                user: {
                    username: 'helen',
                    age: 25,
                },
            }

也可以写成

            data: {
                return {
                    title: '第一个vue程序',
                    user: {
                        username: 'helen',
                        age: 25,
                    },
                }
                
            }

测试

三、数据绑定指令

1、数据绑定指令

step1：创建 02-数据绑定指令.html

step2：引入脚本，创建Vue对象

  <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        company: '尚硅谷',
        site: 'http://www.atguigu.com'
      }
    })
  </script>

step3：使用数据绑定指令做数据渲染

<div id="app">
    <a v-bind:href="site" target="_blank">{{company}}</a>
    <input type="text" v-bind:value="company">
</div>

v-bind: 指令的简写形式

<!-- v-bind: 指令的简写形式 : -->
<a :href="site" target="_blank">{{company}}</a>
<input type="text" :value="company">

2、双向数据绑定指令

step1：创建 03-双向数据绑定指令.html

step2：将02的代码复制到03

step3：将 v-bind:value 修改成 v-model

<!--  v-bind:value 单向数据绑定  -->
<input type="text" v-bind:value="company">
<!--  v-model 双向数据绑定  -->
<input type="text" v-model="company">

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去

注意：v-model只用于用户交互组件中

四、理解MVVM

在ViweModel中有DOM监听器和数据绑定器

五、绑定事件监听

创建 04-绑定事件监听.html

使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<body>
    <div id="app">

        <button v-on:click="study">去学习</button>
        <!--v-on: 指令的简写形式 @-->
        <button @click="study">去学习</button>
        <!--需要传参时加括号，不传参可以省略括号-->
        <button v-on:click="sleep('jack')">去睡觉</button>
    </div>
    <script>
        new Vue({
            el: '#app',  // 通过id指定要渲染的元素
            methods: {
                study() {
                    alert('good good study, day day up')
                },
                sleep(username) {
                    alert(username + '想去睡觉')
                }
            }
        })
    </script>
</body>

六、计算属性

创建 05-计算属性.html

例1：模板中使用js表达式

<body>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello',
            },
        })
    </script>
</body>

模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。

<div id="app">
    <p>原始值: {{ message }}</p>

    <!-- 1、插值数据绑定中使用表达式 -->
    <p>反转消息: {{ message.split('').reverse().join('') }}</p>
</div>

所以，对于任何复杂逻辑，你都应当使用计算属性

例2：使用计算属性

computed: {
    reversedMessage () {
        console.log('计算属性执行')
        return this.message.split('').reverse().join('')
    }
}

<!-- 2、使用计算属性 -->
<p>反转消息: {{ reversedMessage }}</p>

例3：使用方法

methods:{
    reversed () {
        console.log('reversed被执行')
        return this.message.split('').reverse().join('')
    }
}

<!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？

计算属性基于缓存
方法将总会再次执行

<!-- 2、使用计算属性 -->
<p>反转消息: {{ reversedMessage }}</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: {{ reversedMessage }}</p>

<!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: {{ reversed() }}</p>

七、监视

创建 07-监视.html

<body>
    <div id="app">
        姓: <input placeholder="First Name" v-model="firstName" /><br />
        名: <input placeholder="Last Name" v-model="lastName" /><br />
        姓名: <input placeholder="Full Name" v-model="fullName" /><br />
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'Helen',
                lastName: 'Yao',
                // fullName: 'Helen Yao',
            },

            watch: {
                //当firstName改变时自动调用
                firstName(value) {
                    console.log('watch firstName')
                    this.fullName = value + ' ' + this.lastName
                    console.log(this.fullName)
                },

                //当lastName改变时自动调用
                lastName(value) {
                    console.log('watch lastName')
                    this.fullName = this.firstName + ' ' + value
                }
            },
        })
    </script>
</body>

八、条件渲染

创建 08-条件渲染.html

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现

<div id="app">
    <input type="checkbox" v-model="ok" />同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <p v-if="ok">yes.</p>
    <p v-else>no.</p>

    <!-- v:show 条件指令 初始渲染开销大 -->
    <p v-show="ok">yes.</p>
    <p v-show="!ok">no.</p>
</div>

九、列表渲染

创建 09-列表渲染.html

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { username: 'helen', age: 18 },
                { username: 'peter', age: 28 }
            ]
        }
    })
</script>

v-for：列表循环指令

<div id="app">
    <ul>
        <!-- item：当前元素，index：当前元素的索引 -->
        <li v-for="(item, index) in userList">
            {{index}} {{item.username}} {{item.age}}
        </li>
    </ul>
</div>

十、实例生命周期

创建 10-实例的生命周期.html

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

分析生命周期相关方法的执行时机

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
            console.log('created')
            //可以操作 data 中的数据
            console.log(this.message)
            //可以调用methods中的方法
            this.show()
            //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
            console.log(document.getElementById('h3').innerText)
        },
        
        // 数据已经被渲染到页面中
        mounted() { // 第四个被执行的钩子方法
            console.log('mounted')
            //可以取出dom节点取数据，说明用户已经在浏览器中看见内容
            console.log(document.getElementById('h3').innerText)
        },
        
        methods: {
            show() {
                console.log('show方法被调用')
            }
        },
    })
</script>

综合案例

创建：综合案例.html

<body>
  <div id="app">
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>email</th>
      </tr>
      <tr v-for="(item, index) in userList">
        <td>{{index + 1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.email}}</td>
      </tr>
    </table>
  </div>

  <script src="vue.js"></script>
  <script src="axios.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          userList: [],
        }
      },

      created() {
        this.showList()
      },

      methods: {
        showList() {
          //使用自定义配置
          const request = axios.create({
            baseURL: 'http://localhost:8080', //url前缀
            timeout: 1000, //超时时间
            headers: { token: 'helen123456' }, //携带令牌
          })

          // 请求拦截器
          request.interceptors.request.use(
            function (config) {
              // 在发送请求之前做些什么，例如：在请求头中携带一个令牌
              config.headers.token = 'helen123456'
              return config
            },
            function (error) {
              // 对请求错误做些什么
              return Promise.reject(error)
            }
          )

          // 添加响应拦截器
          request.interceptors.response.use(
            function (response) {
              // 对响应数据做点什么，例如：使用response.data替代response，简化前端拿到的数据结果
              return response.data
            },
            function (error) {
              // 对响应错误做点什么
              return Promise.reject(error)
            }
          )

          //基于promise
          request({
            method: 'get',
            url: '/user/list',
          })
            .then((response) => {
              console.log('获取数据成功', response)
              this.userList = response
            })
            .catch((error) => {
              console.log('获取数据失败', error)
            })
        },
      },
    })
  </script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^