VUE框架入门

每天早睡

已于 2022-05-16 22:23:31 修改

阅读量342

点赞数

分类专栏：前端文章标签： vue.js

于 2022-05-16 01:13:34 首次发布

本文链接：https://blog.csdn.net/BLee_0123/article/details/124791187

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、MVVM模型
Vue则是通过Vue对象将数据和view完全分离开来了。
对数据进行操作不在需要引用相应的DOM对象，数据和View是分离的，他们通过Vue对象实现相互的绑定。
在这里插入图片描述

二、从JQuery到Vue
思维的转变：将原有的直接操作DOM转变为操作数据。
Vue.js专于MVVM模型的ViewModel层。它通过双向数据绑定把View层和Model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。
操作元素属性比操作DOM树更加符合我们的认知，降低难度。

三、Vue简介
在这里插入图片描述

四、Vue语法
1）vue库的引用
在这里插入图片描述
方法三：NPM方法
在用Vue.js构建大型应用时，推荐使用NPM安装方法

2）创建vue实例
在这里插入图片描述

3）vue的template属性
template属性用于把指定的元素绑定到DOM上
template属性绑定元素的方式有三种：
使用模板字符串拼接（不推荐）
使用script标签形式（HTML5之前使用）
使用HTML的template标签（官方推荐）

4）插值表达式
Vue插值表达式的语法为：{{变量/表达式}}
在这里插入图片描述

5）vue指令
Vue指令是带有v-前缀的特殊属性

<div v-html="message"></div>
<a v-bind:href="url">xxx</a>
<p v-if="seen">哈哈</p>
<h1 v-show="ok">hello</h1>
<li v-for="item in items">{{item}}</li>

1.v-html指令
用于插入原生的html内容，即：内容中如果包含html标签对，将不会显示出来。
语法如下：

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

其中message为绑定的变量

2.v-text指令
用于填充纯文本，即：即使文本中有html标签，仍然显示它的文本。另外不存在闪烁问题。
语法如下：

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

其中message为绑定的变量

3.v-once指令
用于只渲染元素或组件一次，即数据修改后，元素或组件的内容不变。
语法如下：

<div v-once>{{message}}</div>

其中message为插值表达式

4.v-cloak指令
v-cloak指令，用于解决插值表达式的闪烁现象。
因网络延迟等原因，插值表达式可能会出现闪烁现象即页面上显示{{data}}
语法如下：

<div v-cloak>{{message}}</div>

其中message为插值表达式

5.v-model指令
用于在表单控件或者组件上创建数据的双向绑定，默认情况下每次的数据修改时立即绑定。
语法如下：

<input type="text" v-model="username">

其中username为绑定的变量

6.v-model修饰符
v-model的修饰符，用于修正用户的输入，主要有三个：
.lazy：只有在回车或者失去焦点后，才能进行数据绑定
.number：当用户输入数据类型时，自动把用户输入转换成数字类型
.trim：去除字符串左右两边的空格

7.v-bind指令
用于绑定数据到HTML标签的属性上
语法如下：

<a v-bind:href="url">xxx</a>

其中url为绑定的变量

8.v-on指令
用于监听DOM事件，如：执行js代码、执行事件处理方法、执行内联js方法。
语法如下：

<a v-on:href="doSomething">确定</a>

其中doSomething为事件处理方法

9.两个重要指令缩写
Vue为两个最为常用的指令提供了特别的缩写
在这里插入图片描述

10.v-if/v-else-if/v-else指令
用于条件判断。
语法如下：

<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else-if="type==='C'">C</div>
<div v-else>Not A/B/C</div>

11.v-for指令
用于把数组或对象渲染为列表。它有独特的语法如下：

<li v-for="item in items">{{item}}</li>
<li v-for="(item,index) in items">{{index}}-{{item}}</li>

12.v-show
另一个用于根据条件展示元素的指令，v-show控制的是元素的display。他不支持template元素
语法如下：

<div v-show="ok">hello</div>

其中ok为绑定的布尔变量

6）Vue的computed计算属性
方便处理复杂逻辑

7）watch监听属性
监听属性的作用是当被监听的属性发生变化时，监听函数就会被执行

8）component全局组件
在这里插入图片描述

9）component局部组件
在这里插入图片描述

13）生命周期函数（基本不用）
在这里插入图片描述

14）Promise对象
在这里插入图片描述 Promise基本语法：

15）axios组件
axios是基于Promise的HTTP请求客户端。由于Vue本身不支持发送Ajax请求，所以需要使用vue-resource、axios等插件，vue-resource已经不在更新，Vue2推荐使用axios。
因为axios基于Promise的，所以axios能使用**.then()**等方法。

1.axios插件安装
方法一：使用npm
npm install axios

方法二：使用CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.axios的请求
get请求：
在这里插入图片描述 post请求：

3.axios的API
axios还可以通过配置（config）来发送请求，语法格式：axios(config)

axios ({
	method: "POST",
	url: "/user/abcd",
	data: {"name": "zhangsan",
		   "age": 25},
	headers: {"Content-type": "application/json"}
})

16）vue-cli搭建
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
用以下命令即可在当前文件夹生成一个项目模板：
vue init webpack 项目名

17）element-ui组件
在这里插入图片描述

五、案例
第一个Vue应用：

<!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://unpkg.com/vue@next"></script><!-- vue3 的CDN-->
</head>

<!-- ▲▲▲▲▲ Vue的核心，是一个允许采用简洁的模板语法，来声明式地将数据渲染进 DOM 的系统 -->

<body>
  
  <div id="root">
    {{message}}   <!-- 用两对大括号包裹的，叫插值表达式 -->
  </div>

</body>
<script>

  //1. createApp 表示创建一个 Vue 应用（换句话说创建了一个Vue实例）, 并存储到 app 变量中
  const app = Vue.createApp({
    //2. Vue实例中，添加了一个data属性，返回的是一个对象
    data () {
      return {
        message: 'hello world!'
      }
    },
    //3.methods属性用于定义方法
    methods: {
        
    }    
    
  });
  //99.将vue应用挂载到页面DOM
  const vm=app.mount('#root');

</script>
</html>

vue中template属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue中template属性</title>
  <script src="https://unpkg.com/vue@next"></script><!-- vue3 的CDN-->
</head>

<!-- ▲▲▲▲▲ Vue中template属性：用于把指定的元素绑定到DOM上。但如果本身挂载的DOM中存在内容，
                             则在编译时替换为template属性指定的内容
                方式1：不使用template属性
                方式2：使用模板字符串拼接（不建议，难维护）
                方式3：使用script标签形式（HTML5标准之前的写法,script中type属性加上"x-template"）
                方式4：使用HTML的template标签（官方推荐的写法）

-->

<body>
  
  <div id="root">
    <div><h1>方式1：{{message}}</h1></div>
  </div>

  <!-- 方式4 使用HTML的template标签形式（推荐）-->
  <template id="tem4">
    <div>
        <h1>方式4：{{message}}</h1>
    </div>
  </template>

</body>


<!-- 方式3 使用script标签形式-->
<script type="text/x-template" id="tem3">
  <div> 
      <h1>方式3：{{message}}。</h1>
  </div>
</script>



<script>
  const app = Vue.createApp({
    data () {
      return {
        message: 'hello world!'
      }
    },
    // template:'<div><h1>方式2：{{message}}</h1></div>'
    // template:'#tem3'
    // template:'#tem4'
  });
  const vm=app.mount('#root');

</script>
</html>

插值表达式与其他插值指令：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插值表达式与其他插值指令</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲ Vue的插值表达式的语法为：{{变量或表达式}}，存在闪烁问题
    ▲▲▲▲▲ v-html指令:用于插入原生的html内容
    ▲▲▲▲▲ v-text指令：用于填充纯文本，不存在闪烁问题
    ▲▲▲▲▲ v-once指令：只渲染元素和组件一次指令
    ▲▲▲▲▲ v-cloak指令：有时候网络延时等原因，插值表达式可能会出现闪烁现象，即页面上显示{{data}}，
    此时，可以使用v-cloak指令。
  -->
  <style>
    /* 解决插值表达式闪烁 */
    [v-cloak]{
      display: none;
    }
  </style>
<body>
  
  <div id="root">

    <h2>1.插值表达式</h2>
    <p>{{message}}  </p>              <!--变量--> 
    <p>{{1+2}}  </p>                  <!--算术表达式-->
    <p>{{10===10}}  </p>              <!--关系表达式（全等于）-->
    <p>{{1 > 2 ? "是" : "否" }} </p>  <!--三目运算符-->
    <p v-cloak>{{message}}  </p>      <!--防止闪烁--> 
    <p v-once >{{message}}  </p>      <!--只渲染一次指令，当改变message的值时，它不变--> 

    <h2>2.v-html插值指令</h2>
    <p v-html='rawHtml'></p>

    <h2>3.v-text插值指令</h2> 
    <p v-text='rawHtml'></p>
      
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            message: 'hello world!',
            rawHtml: '<span style="color:red">松勤</span>'
          }
      }
    });
  const vm=app.mount('#root');
  

</script>
</html>

model表单数据双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model数据双向绑定</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  v-model指令，用于在表单控件或者组件上创建数据的双向绑定,默认情况下每次修改立即绑定
    ▲▲▲▲▲  v-model的修饰符，用于修正用户的输入
                  .lazy :只有在回车或者失去焦点后，才进行数据绑定
                  .number：当用户输入数字类型时，自动把用户输入转换为数字类型
                  .trim：去除字符串左右两边的空格
  
  -->
<body>
  
  <div id="root">
    
    <div>
      姓名：<input type="text" v-model="name">
    </div>
    <div>
      民族：
      <select v-model="nation">
          <option value="汉族">汉族</option>
          <option value="非汉族">非汉族</option>
      </select>
    </div>
    <div>
      性别：
      <input type="radio" value="男" name="xb" v-model="sex"> 男
      <input type="radio" value="女" name="xb" v-model="sex"> 女
    </div>
    <div>
      爱好：
      <input type="checkbox" value="打篮球" name="ah" v-model="hobby"> 打篮球
      <input type="checkbox" value="踢足球" name="ah" v-model="hobby"> 踢足球
      <input type="checkbox" value="唱歌"   name="ah" v-model="hobby"> 唱歌
    </div>
    <div>
       自我介绍：<textarea cols="30" rows="5" v-model="introduce "></textarea>
    </div>
    <div>
       体重：<input type="number" v-model.number="weight">
    </div>
    <h2>输入结果：</h2>
    <div>姓名：{{name}}</div>
    <div>民族：{{nation}}</div>
    <div>性别：{{sex}}</div>
    <div>爱好：{{hobby}}</div>
    <div>自我介绍：{{introduce }}</div>
    <div>体重：{{weight }}</div>
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            name: '',
            nation:'',
            sex:'',
            hobby:[],
            introduce:'',
            weight:''
          }
      }
    });
  const vm=app.mount('#root');
  
</script>
</html>

v-bind属性绑定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind属性绑定</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  v-bind指令，用于绑定数据到HTML标签的属性上
           v-bind指令是最常用的指令之一，所以提供了特定的缩写。
                 v-bind:属性名    缩写为    :属性名
  
  -->
  <style>
     .color-red {
       color:red;
     }
     .color-blue {
       color:blue;
     }
     .f24 {
       font-size: 24px;
     }
     .bg-yellow {
       background: yellow;
     }
  </style>
<body>
  
  <div id="root">
    <h2>1.样式属性的绑定</h2>
    <div v-bind:class="classString">class绑定样式1-字符串</div> 
    <div v-bind:class="classObject">class绑定样式2-对象</div>
    <div v-bind:class="classArray">class绑定样式3-数组</div>
    <div v-bind:style="styleString">style绑定样式4-字符串</div>
    <div v-bind:style="styleObject">style绑定样式5-对象</div>
    <h2>2.其他属性的绑定</h2>
    <div>
      <a :href="url" target="_blank">网址</a>   <!--绑定href属性-->
    </div>
    <div>
      <button :disabled="isButtonDisabled">确定</button>   <!--绑定disabled属性，是否禁用元素-->
      <button v-bind:disabled="isButtonDisabled">v-bind指令的缩写</button>  
    </div>
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            use:false,
            classString:'color-red',
            classObject: { 'f24': false, 'color-blue': true },
            classArray: ['color-red', 'f24', {'bg-yellow': true}],

            styleString: 'color: blue;background: pink',
            styleObject: {
              color: 'blue',
              background: 'yellow'
            },
            
            url: 'http://www.baidu.com',
            isButtonDisabled: false
          }
      }
    });
  const vm=app.mount('#root');
  
</script>
</html>

v-on事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-on事件绑定</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  v-on 指令：用于监听DOM事件，如：执行js代码、执行事件处理方法、执行内联js方法
           v-on 指令也是最常用的指令之一，所以也提供了特定的缩写。
                 v-on:事件名    缩写为    @事件名
  
  -->
<body>
  
  <div id="root">
    <div>
      <h2>1.执行事件处理方法</h2>
      <button  v-on:click="counter += 1">Add+1</button >
      <p>这个按钮被点击了：{{counter}} 次</p>
    </div>
    <div>
      <h2>2.执行js代码</h2>
      <p><a v-on:click.once="checkMe">点我呀!</a></p>
      <p><a @click="checkMe">v-on指令的缩写</a></p>
    </div>
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            counter: 0
          }
      },
    methods: { 
        // methods属性用于定义方法，值是一个对象，表示可以定义多个方法。
        checkMe: function() {
            alert('Hello World');
        }
      }

    });
  const vm=app.mount('#root');
  
</script>
</html>

v-if等条件语句：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-if等条件语句</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  v-if指令：表示条件判断
           v-else指令：用作v-if的else块
           v-else-if指令：用作v-if的else-if 块

           v-show指令：另一个用于根据条件展示元素的指令，v-show控制的是元素的display。它不支持template元素

  
  -->
<body>
  
  <div id="root">
    <div v-if="type === 'A'"> A </div>
    <div v-else-if="type === 'B'"> B </div>
    <div v-else-if="type === 'C'"> C </div>
    <div v-else> Not A/B/C </div>

    <h1 v-show="ok">Hello!</h1>

  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            type: 'C',
            ok:false
          }
      }
    });
  const vm=app.mount('#root');
  
</script>
</html>

v-for循环语句：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for循环语句</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  v-for 指令：用于把数组或对象渲染为列表。它有独特的语法：
                      它的语法格式为：v-for="item in items"
                      其中 items 是源数据数组，item 则是被迭代的数组元素的别名。
           此外，v-for还支持一个可选的索引参数。
                         语法格式为：v-for="(item,index) in items"           
  
  -->
<body>
  
  <div id="root">
      <h2>循环渲染一个数组1</h2>
      <ul>
        <li v-for="item in items1">{{item}}</li>
      </ul>
      <h2>循环渲染一个数组2</h2>
      <ul>
        <li v-for="item in items2">{{item.city}}</li>
      </ul>
      <h2>循环渲染一个对象-第一个参数显示value</h2>
      <ul>
        <li v-for="value in person">{{value}}</li>
      </ul>
      <h2>循环渲染一个对象-第二个参数显示title</h2>
      <ul>
        <li v-for="(value,title) in person">{{title}}-------{{value}}</li>
      </ul>

      <h2>===============添加可选的索引参数=================</h2>
      <h2>循环渲染一个数组1</h2>
      <ul>
        <li v-for="(item , index) in items1">{{index}}-{{item}}</li>
      </ul>
      <h2>循环渲染一个对象-第二个参数显示title</h2>
      <ul>
        <li v-for="(value,title,index) in person">{{index}}------{{title}}-------{{value}}</li>
      </ul>

  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            message: '',
            items1:['泰国','新加坡','印度尼西亚'],
            items2:[
                    {'city':'泰国'},
                    {'city':'新加坡'},
                    {'city':'印尼九层塔'}
                  ],
            person:{
              'name':'张三',
              'sex':'男',
              'birthday':'2009-01-01'
            },
          }
      }
    });
  const vm=app.mount('#root');
  
</script>
</html>

computed计算属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>computed 计算属性</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  computed：表示计算属性，它的作用是方便处理复杂逻辑
                     computed是有缓存，只有当依赖的内容发生变化时，才会重新计算
                     虽然computed 实现的功能，methods都能实现，但是因为computed有缓存，因此性能更好
  
  -->
<body>
  
  <div id="root">
    <h2>1.计算属性</h2>
    <div>
      {{now1}}
    </div>

    <h2>2.方法</h2>
    <div>
      {{now2()}}
    </div>
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            message: '12345',
            count: 0
          }
      },
    methods: {
      // 在控制台执行：vm.now2()，每次执行的结果都会变，即：methods是不会缓存的
      now2 (){
        return Date.now() +'-' +this.count
      }
    },
    computed: {
      // 在控制台执行：vm.now1，每次执行的结果都相同，即：computed属性是会缓存的
      now1 (){
        return Date.now() +'-' +this.count
      }
    }  
  });
  const vm=app.mount('#root');
  
</script>
</html>

watch监听属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch 监听属性</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  watch：表示监听属性，它的作用是当被监听的属性发生变化时，监听函数就会被执行
    
  -->
<body>
  
  <div id="root">
    <h2>1.监听属性</h2>
    <div>
      {{count}}
    </div>
   
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            message: '12345',
            count: 0
          }
      }, 
    watch: {
      // 当被监听的属性count发生变化时，函数会执行
      // 在控制台执行：vm.count=123
      count (a,b){
        alert('属性修改前：'+b+' 修改后：'+a);
      }
    }  
  });
  const vm=app.mount('#root');
  
</script>
</html>

Component全局组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>component全局组件</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  component： component组件是Vue最强大的功能之一。
                       主要用于：扩展 HTML 元素，封装可重用的代码。
                       组件分为全局组件和局部组件。
                       全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议字母单词小写，中间用横线间隔
                       注册组件的语法格式为：Vue.component(tagName, options)
                       其中：tagName 为组件名，options 为配置选项。
                       注册后，我们可以使用以下方式来调用组件：<tagName></tagName>
            props参数：写在子组件中，用来接收父组件的【自定义属性】传来是参数
  -->
<body>
  
  <div id="root">
    <h2>1.不需要传参</h2>
    <song-qin></song-qin>
    <song-qin></song-qin>  <!--组件的复用-->
    <song-qin></song-qin>  <!--组件的复用-->

    <h2>2.通过v-bind和props向组件传递参数</h2>
    <ul>
      <myli  v-for="item in  items" v-bind:item="item"></myli>
    </ul>
    <h2>3.组件复用</h2>
    <ul>
      <myli  v-for="item in  items9" v-bind:item="item"></myli>
    </ul>
    
  </div>

</body>
<script>

  var app = Vue.createApp({
    data(){
          return {
            message: '12345',
            items:[1,2,3,4,5],
            items9:['a','b','c','d','e']
          }
      }
  });
  // 1.注册songqin组件
  app.component('song-qin', {
    template: '<p>自定义组件!</p>'
  })
  // 2.注册myli组件
  app.component('myli', {
    props:['item'],
    template: '<li>{{item}}</li>'
  })
  
  const vm=app.mount('#root');
  
</script>
</html>

Component局部组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>component局部组件</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

  <!-- 
    ▲▲▲▲▲  局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议首字母大写，驼峰命名
           局部组件使用时，要做一个名字和组件间的映射对象，如不写映射，Vue 底层也会自动尝试帮我们做映射
  -->
<body>
  <div id="root">
    <counter></counter>
    <hello-world></hello-world>
  </div>
</body>

<script>
  // 1.定义：局部组件1
  const Counter = {
    data() {
      return {
        count: 10
      }
    },
    template: `<div @click="count += 1">{{count}}</div>`
  }
  // 2.定义：局部组件2
  const HelloWorld = {
    template: `<div>hello world</div>`
  }

  // 3.创建VUE对象
  var app = Vue.createApp({
    // 使用components属性，对局部组件进行注册
    components: {
      counter: Counter,  //注册局部组件1
      // 'hello-world': HelloWorld,   //注册局部组件2
      // Counter,HelloWorld  //如不写映射，底层也会自动尝试帮我们做映射
    }
  });
  
  const vm=app.mount('#root');
  
</script>
</html>

vue生命周期：

<!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://unpkg.com/vue@next"></script>
</head>
<body>
  <!-- 
    ▲▲▲▲▲  Vue 的生命周期函数（也叫钩子函数）：指当一个事件触发时，系统自动去执行的一些操作。
      简言之就是在某一时刻，会自动执行的函数，叫生命周期函数。
      Vue中提供了八种生命周期函数。
  -->
  <div id="root">
    <div>{{message}}</div>
  </div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    // 1.在实例生成之前会自动执行的函数
    beforeCreate() {
      console.log('1.beforeCreate()被执行！')
    },
    // 2.在实例生成之后会自动执行的函数
    created() {
      console.log('2.created()被执行！')
    },
    // 3.在组件内容被渲染到页面之前自动执行的函数
    beforeMount() {
      console.log('3.beforeMount()被执行！组件内容为：',document.getElementById('root').innerHTML)
    },
    // 4.在组件内容被渲染到页面之后自动执行的函数
    mounted() {
      console.log('4.mounted()被执行！组件内容为：',document.getElementById('root').innerHTML)
    },
    // ▲ 控制台执行：vm.$data.message='你好';  可以观察5、6
    // 5.当数据发生变化时会立即自动执行的函数
    beforeUpdate() {
      console.log('5.beforeUpdate()被执行！组件内容为：',document.getElementById('root').innerHTML);
    },
    // 6.当数据发生变化，页面重新渲染后，会自动执行的函数
    updated() {
      console.log('6.updated()被执行！组件内容为：',document.getElementById('root').innerHTML);
    },
    // ▲ 控制台执行：app.unmount();  可以观察7、8
    // 7.当Vue应用失效时，自动执行的函数
    beforeUnmount() {
      console.log('7.beforeUnmount()被执行！组件内容为：',document.getElementById('root').innerHTML);
    },
    // 8.当Vue应用失效时，且dom完全销毁之后，自动执行的函数
    unmounted() {
      console.log('8.unmounted()被执行！组件内容为：',document.getElementById('root').innerHTML);
    }
  });
  const vm = app.mount('#root');
</script>
</html>

Promise对象：

<!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>Promise对象</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>Promise对象语法学习</h1>
    <h2>前提</h2>
    <p>1.需要了解箭头函数的使用</p>

    <script>
        //1. 创建Promise对象，并执行异步处理业务
        let p1=new Promise(
            function(resolve,reject){
                 //这里写异步业务处理......
                 console.log('异步业务处理');
                 if (1==1){
                    resolve("随便什么参数-resolve");
                 }else{
                    reject("随便什么参数-reject");
                }             
            }
        );
        //2. 等待p1业务完成，才执行then方法。
        let p2=p1.then(
            res =>{
                // abc();  故意搞一个异常
                console.log(res);
            },
            rej =>{
                console.log(rej);
            }
        )
        //3.调用catch方法，捕获异常
        let p3=p2.catch(
            ()=> {
                console.log('有异常');
            }
        )
        

    </script>
</body>
</html>

Axios发送HTTP请求：

<!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>Axios发送HTTP请求</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>Axios发送HTTP请求</h1>
    <h2>前提</h2>
    <p>1.Promise对象知识</p>
    <p>2.需要了解箭头函数的使用</p>

    <script>
        // 1.get 请求1
        axios.get('http://47.105.51.33:9090/student/index.html?ID=12345')
        .then(function(res){
            console.log('请求一：'+res.data);
        });

        //2.get 请求2
        axios.get('http://47.105.51.33:9090/student/index.html',{
            params:{
                ID:12345
            }            
        })
        .then(function(res){
            console.log('请求二：'+res.data);
        });
        
  
        //3.post 请求(请求体data默认是json格式)
        axios.post('http://47.105.51.33:9090/api/user/login',{
                userName:'13575726536',
                password:'111111'
            },{
                headers: {'Content-Type':'application/json;charset=utf8'}
            }
        )
        .then(function(res){
            console.log('请求三：'+res.data.message);
        });

        //4.axios API (请求体data默认是json格式)
        axios({
            method: "POST",
            url: "http://47.105.51.33:9090/api/user/login",
            data: {"userName": "13575726536",
                   "password": "111111" },
            headers: {"Content-Type": "application/json" }
        }).then(function(res){
            console.log('请求四：'+res.data.message);
        });

        //5.axios API (如果请求体是表单格式)
        //使用URLSearchParams API来构造表单数据，还有一种方式是使用qs库
        const params = new URLSearchParams();
              params.append('username', 'admin');
              params.append('password', 'admin123');
        console.log(params);
        axios({
            method: "POST",
            url: "http://devops.sqtest.online:8073/api/user/login/",
            data: params,
            headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" }
        }).then(function(res){
            // debugger
            console.log('请求五：'+res.data.msg);
        });


</script>
</body>
</html>

字符串反转：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo 1</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root">
    <div>
      {{content}}
      <button v-on:click="handleBtnClick">反转</button>
    </div>
  </div>
</body>
<script>
  Vue.createApp({
    data() {
      return {
        content: 'hello world'
      }
    },
    methods: {
      handleBtnClick() {
        this.content = this.content.split('').reverse().join('');
      }
    }
  }).mount('#root');
 
</script>
</html>

内容隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo 2</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root">
    <div>
      <span v-if="show">hello world</span>
      <button v-on:click="handleBtnClick">显示/隐藏</button>
    </div>
  </div>
</body>
<script>
  Vue.createApp({
    data() {
      return { show: true }
    },
    methods: {
      handleBtnClick() {
        this.show = !this.show;
      }
    }
  }).mount('#root');
</script>
</html>

TodoList功能：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo 4</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root">
    <div>
      <input v-model="inputValue" />
      <button v-on:click="handleAddItem">增加</button>
      <ul>
        <li v-for="(item, index) of list">{{item}}</li>
      </ul>
    </div>
  </div>
</body>
<script>
  Vue.createApp({
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handleAddItem() {
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }).mount('#root');
</script>
</html>