Vue2+Vue3学习 - 技术栈

一套用于构建用户界面的渐进式框架

基于数据动态渲染页面

1.搭建Vue开发环境

官网文档找

部分构建vue

2.Hello小案例(vue3)

el：指定挂载点配置选择器，指定vue管理的哪个盒子

data:提供数据

vue具有响应式特性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
             <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模块 -->
     <script type="module">
            import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
            createApp({
                data(){
                    return{
                        //定义数据
                        msg:'hello vue'
                    }
                }

            }).mount("#app")
     </script>
</body>
</html>

Vue指令

指带有v-前缀的特殊标签属性

v-html:设置内部的innerhtml 修改页面结构和内容

v-show:切换css的display:none来控制显示隐藏（简单的隐藏控制）

v-if:根据判断条件控制元素的创建和移除（条件渲染）

v-on

函数里调用自身参数：this.money

v---bind

v-bind使用值，下面的data中也需要提供

v-for

v-for="(item,index) in 数组" item每一项，index下标

中的key属性 :key="唯一标识" 需要给元素加上唯一标识，便于vue进行列表项的正确排序复用

v-bind

3.模板语法(vue3)

html 复制代码

<!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>初识Vue</title>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="app">
        <h1>Hello,{{name}}</h1>
        <hr>
        <h1>指令语法</h1>
            <a v-bind:href="url">点我去百度</a>
    </div>

<script>
  const { createApp } = Vue
  const x=createApp({
    data() {
      return {
        name: 'liuben',
        url:"http://www.baidu.com"
      }
    }
  })
  x.mount('#app')
</script>
</body>

</html>

1.插值语法

{{xxx}} 用于解析标签体内容 xxx为js表达式

2.指令语法

v-bind:href="xxx"(可简写成:href="xxx") 用于解析标签 xxx为js表达式

4.数据绑定

v-model

只能应用在表单类元素（输入类元素）双向数据绑定->可以快速获取或设置表单元素内容

1.数据变化->视图自动更新 2.视图变化->数据自动更新

v-model:value可以简写为v-model,因为v-model就是收集value值

单向绑定只有红(只能从data流向页面)，双向绑定红粉

html 复制代码

<!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>数据绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    单向数据绑定：<input type="text" v-bind:value="name"><br>
    双向数据绑定：<input type="text" v-model:value="name">
</div>

<script>
  new Vue({
    el:'#root',
    data:{
      name:'liuben'
    }
  })
</script>
</body>
</html>

v-model绑定后自动选取