Vuejs

灰太狼 2021-12-21 19:23 542阅读 0赞

1. 入门案例

  1. 创建vuejs-demo.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <title>快速入门</title>
    7. </head>
    8. <body>
    9.     <!-- 第三步：定义视图，确定渲染的开始位置 -->
    10.     <div id="app">
    11.         <!-- 第四步：查看数据是否渲染成功 -->
    12.     </div>
    14.     <!-- 第一步：引入vue.js库-->
    15.     <script> <!-- 第二步：初始化vuejs对象 --> </script>
    16. </body>
    17. </html>

  2. 引入vue.js文件

    1. <script src="js/vuejs-2.5.16.js"></script>

  3. 定义Vuejs对象和数据

    1. var app = new Vue({ 
    2.     el:'#app', //表示当前vue对象接管了div区域
    3.     data:{ 
    4.         message:'hello world' //注意不要写分号结尾
    5.     }
    6. });

  4. 定义视图渲染数据

    1. <div id="app">
    2.      {
    3.      {message}}
    4.  </div>

2. 插值表达式

  1. 语法(双大括号) ：{ {}}
  2. 作用：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
  3. 支持+，-，*，/，%，等相关算数运算符
    { { number + 1 }}
    { { ok ? ‘YES’ : ‘NO’ }}
  4. 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。 { { var a = 1 }} { { if (ok) { return message } }}

注：{ {}} 插值表达式是不能直接作用在属性上的。需要使用v-bind进行数据绑定

3. Vuejs中常用的内置指令(重点)
























































指令名称 描述 用法
v-on 事件绑定 v-on:事件 = “事件名”
缩写：@事件 = “事件名”
点击事件：click,dblclick,change,blur
键盘事件：keydown/keyupkeypress
鼠标事件：mousedown,mouseover,mousemove,mouseout
v-text/v-html 文本取值 <span v-text=“title”> 或者 <span v-html=“title”>
两者的区别是：v-text不支持标签解析，v-html支持标签解析。
v-bind 属性取值 v-bind:属性 = “属性值”
缩写：:属性 = “属性值”
解决在标签的属性上如何获取动态的数据值的问题。
比如：<span v-bind:title=“title”> 或者<span :title=“title”>
v-model 获取form控件值 用于form表单控制元素值的相关获取和同步。
v-for 循环迭代 一般用于循环数组，对象和对象数组。
v-show/v-if/v-else 隐藏/显示 v-show：是控制元素display:none/block的切换。v-if：是逻辑判断，控制元素的存在与不存在。
v-pre 原样输出不解析 如果你不想解析插值表达式，原样输入可以使用v-pre
v-once 渲染一次 如果你想渲染一次，后面改变数据不会影响视图的变化，可以使用v-once。
v-cloak 解决网络延迟 往往在真实的场景中，插值表达式渲染会很慢，
而造成插件表达式的外漏，可以借助v-cloak和[v-cloak]{display:none;}来解决这个问题

注：v-model 取值是双向的，即v-model的值发生改变，data中的数据也会发生改变,data中的数据发生改变，则v-model的值也会发生改变，而v-bind 属性取值是单向的，即v-bind的值发生改变，data中的数据不会发生改变

4. v-pre

如果不想渲染任何动态的部分或者插值部分，可以使用v-pre指令：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>v-if与v-show</title>
  6.     <script src="js/vuejs-2.5.16.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <input type="text" v-model="flag">
  11.     <span v-pre>
  12.         <span v-if="flag < 1">我是大帅哥1</span>
  13.         <span v-else-if="flag >= 1 && flag < 4">我是大帅哥2</span>
  14.         <span v-else-if="flag >= 4 && flag <10">我是大帅哥3</span>
  15.         <span v-else>我是普通人</span>
  16.         {
  17.    {flag}}
  18.     </span>
  19. </div>
  20. <script> new Vue({ el : '#app', //表示当前vue对象接管了div区域 data : { flag : 1 } }); </script>
  21. </body>
  22. </html>

效果：在这里插入图片描述

5. v-once

只渲染元素和组件一次。随后的重新渲染或者数据改变都不会在渲染和发生改变。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>v-if与v-show</title>
  6.     <script src="js/vuejs-2.5.16.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <input type="text" v-model="flag">
  11.     <span v-once>
  12.         <span v-if="flag < 1">我是大帅哥1</span>
  13.         <span v-else-if="flag >= 1 && flag < 4">我是大帅哥2</span>
  14.         <span v-else-if="flag >= 4 && flag <10">我是大帅哥3</span>
  15.         <span v-else>我是普通人</span>
  16.         {
  17.    {flag}}
  18.     </span>
  19. </div>
  20. <script> var app = new Vue({ el : '#app', //表示当前vue对象接管了div区域 data : { flag : 1 } }); </script>
  21. </body>
  22. </html>

6. Vuejs操作样式和class

实际开发中，对元素操作和控制样式或者class也是非常频繁的操作。vue对齐样式和class操作是通过v-bind来完成的。

class操作如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>07-vue-class-style.html</title>
  6.     <style> .ctitle{ color:red;} .active{ background:#eee;padding:20px;margin-top:10px;} .text-danger{ font-weight: bold} </style>
  7. </head>
  8. <body>
  10.     <!--定义vuejs管理渲染的范围-->
  11.     <div id="app">
  13.         <!-- 字符串的方式 -->
  14.         <div class="ctitle" v-bind:class="'active'">{
  15.    {title}}</div>
  16.         <!-- 对象的方式 -->
  17.         <div class="ctitle" v-bind:class="{ 'active':isActive}">{
  18.    {title}}</div>
  19.         <!-- 多个值和对象方式 -->
  20.         <div class="ctitle" v-bind:class="{ 'active':isActive,'text-danger': hasError}">{
  21.    {title}}</div>
  23.         <!-- 数组的方式 -->
  24.         <div class="ctitle" v-bind:class="[activeClass,errorClass]">{
  25.    {title}}</div>
  26.         <!-- 支持三目运算-->
  27.         <div class="ctitle" v-bind:class="[isActive?activeClass:'',errorClass]">{
  28.    {title}}</div>
  29.     </div>
  31.     <!-- 第二步：导入vue.js文件 -->
  32.     <script src="js/vuejs-2.5.16.js"></script>
  33.     <script> // 第三步：定义vuejs对象，开始进行视图和数据的渲染 var app = new Vue({ el:"#app", data:{ title:"Hello world!", activeClass: 'active', errorClass: 'text-danger', hasError:true, isActive:true //我来控制样式是否加或者不加 } }) ; </script>
  34. </body>
  35. </html>

style操作如下

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>07-vue-class-style.html</title>
  6.     <style> .ctitle{ background:#eee; padding: 20px;} </style>
  7. </head>
  8. <body>
  10.     <!--定义vuejs管理渲染的范围-->
  11.     <div id="app">
  12.         <!-- 对象的方式 -->
  13.         <div class="ctitle" v-bind:style="{ 'color':activeColor,'fontSize':fontSize+'px'}">{
  14.    {title}}</div>
  15.         <!-- 数组的方式 -->
  16.         <div v-bind:style="[baseStyles, overridingStyles]">{
  17.    {title}}</div>
  18.     </div>
  20.     <!-- 第二步：导入vue.js文件 -->
  21.     <script src="js/vuejs-2.5.16.js"></script>
  22.     <script> // 第三步：定义vuejs对象，开始进行视图和数据的渲染 var app = new Vue({ el:"#app", data:{ baseStyles:{ fontSize:"30px", color:"green" }, overridingStyles:{ background:"#eee", marginTop:"10px", padding:"20px" }, title:"Hello world!", activeColor: 'red', fontSize: 30 } }) ; </script>
  23. </body>
  24. </html>

7. Vuejs的生命周期(了解)

vue在生命周期中有这些状态：

beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeDestroy,
destroyed。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作。

例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>生命周期</title>
  6. </head>
  7. <body>
  8. <div id="app">{
  9.    {message}}</div>
  10. <script src="js/vuejs-2.5.16.js"></script>
  11. <script> var vm = new Vue({ el : "#app", data : { message : 'hello world' }, beforeCreate : function() { console.log(this); showData('创建vue实例前-beforeCreate', this); }, created : function() { showData('创建vue实例后-created', this); }, beforeMount : function() { showData('挂载到dom前-beforeMount', this); }, mounted : function() { showData('挂载到dom后-mounted', this); }, beforeUpdate : function() { showData('数据变化更新前-beforeUpdate', this); }, updated : function() { showData('数据变化更新后-updated', this); }, beforeDestroy : function() { vm.test = "3333"; showData('vue实例销毁前-beforeDestroy', this); }, destroyed : function() { showData('vue实例销毁后-destroyed', this); } }); function realDom() { console.log('真实dom结构：' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 数据：' + obj.message) console.log('挂载的对象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } vm.message = "good..."; vm.$destroy(); </script>
  12. </body>
  13. </html>

8. Vuejs中通过Axios完成异步请求

  1. 导入axios.js文件

  2. 创建vue对象

    // 创建vue对象

    1. var vue = new Vue({ 
    2.     el: "#app",
    3.     data: { 
    4.         ids: [],
    5.         entity: { },
    6.         searchEntity: { }
    7.     }

  3. axios.get请求传入一个json数据：
    格式：url，{params: this.searchEntity}

    // 分页查询全部品牌
    search: function (page) { 

    1. axios.get("/brand/findByPage?page=" + page, { params: this.searchEntity}).then(function (res) { 
    2.     console.log(res.data)
    3. }).catch(function (err) { 
    4.     console.log(err.data)
    5. });

    }

  4. post请求传入一个json
    用法：url，this.entity

    axios.post(“/brand/“ + url, this.entity).then(function (res) { 

    1.  if (res.data) { 
    2.         vue.search(1);
    3.     } else { 
    4.         alert("操作失败!");
    5.     }
    6. });

  5. get请求传入一个数组
    用法：url + this.ids

    axios.get(“/brand/del?ids=” + this.ids).then(function (res) { 

    1. if (res.data) { 
    2.         var page = vue.checked ? vue.page - 1 : vue.page;
    3.         if (page < 1) { 
    4.             page = 1;
    5.         }
    6.         // 删除成功
    7.         vue.search(page);
    8.     }
    9. }).catch(function (err) { 
    10.     alert("操作失败!")
    11. })

注意：
如果前端的content-type请求头使用application/json或者是application/xml,不加@RequestBody就无法映射到对应的bean中，默认的application/x-www-form-urlcoded就没有问题.
axios.post请求默认使用的Content-Type请求头是: application/json;charset=UTF-8（是一个json字符串）类型；
axios.get使用的是默认的Content-Type请求头是：application/x-www-form-urlcoded（也就是对象）；

9. vue自定义标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  9.         <div id="app">
  11.             <h1>
  12.                 {
  13.    {date}}
  14.             </h1>
  16.             {
  17.    {date | formatDate('yyyy-MM-dd')}}
  18.             {
  19.    {date | formatDate('yyyy/MM/dd')}}
  20.             {
  21.    {date | formatDate('MM-yyyy-dd')}}
  23.             <span :title="date | formatDate('MM-yyyy-dd')"></span>
  25.         </div>
  27.         <script type="text/javascript" src="js/vuejs-2.5.16.js"></script>
  28.         <script> Vue.filter("formatDate",function(value,fmt){ return formatDate(value,fmt); }); Vue.filter("formatDate",function(value,fmt){ return formatDate(value,fmt); }); Vue.filter("formatDate",function(value,fmt){ return formatDate(value,fmt); }); var vue = new Vue({ el:"#app", data:{ date:"2100-12-12 12:12:12"}, mounted:function(){ } }) function formatDate(date,fmt){ var date = new Date(date.replace(/-/g,"/")); var o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "H+": date.getHours(), //小时 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } console.log(formatDate("2100-12-12 12:12:12","yyyy-MM-dd")) console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd")) console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd HH:mm")) </script>
  29.     </body>
  30. </html>

发表评论

表情：
评论列表 （有 0 条评论，542人围观）

还没有评论，来说两句吧...

相关阅读