十分钟带你学会Vue

最新推荐文章于 2022-11-08 12:03:16 发布

UkeLiu

最新推荐文章于 2022-11-08 12:03:16 发布

阅读量2.3k

点赞数 2

分类专栏： Vue 文章标签： vue 前端 mvvm html javascript

本文链接：https://blog.csdn.net/weixin_50563955/article/details/110709192

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. Vue概念
  1. 同类产品

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。

ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被“鄙视”的脚本语言的前身。

随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。Angular全面，项目代码多；Vue轻便，针对性解决问题，拿来就用，开发存在局限性。新手可以从vue上手，再去了解react和angular。

Vue是我们国人开发，作者：尤雨溪，JavaScript渐进框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript，TypeScript是JavaScript的超级，为微软研发，语法更加细致严谨，可以构建大型项目，基于ES6标准。

1. 1. 写一个简单的demo：hellovue.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>new document</title>

<script src="js/vue.js" type="text/javascript"></script>

</head>



<body>

//这是我们的View（展现）

<div id="app">

<p>{{ message }}</p>

</div>

</body>



<script type="text/javascript">

//这是我们的Model（数据）

var data = {

message : 'Hello Vue!'

}



// 创建一个 Vue 实例或 "ViewModel"

// 它连接 View 与 Model

var v = new Vue({

el : '#app',

data : data

})

</script>



</html>

Vue对象的参数：

el：绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值
1. 1. MVVM框架

和传统框架不同的是，Vue采用了最新的MVVM框架，它最大的特点就是，我们原来操作的是页面，页面和页面里的数据混杂在一起。而MVVM框架体系引入后端早已深入人心的分层思想，是MVC架构的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

1. 1. 特点
一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
其核心思想是数据驱动、组件化的前端开发
原生html页面操作的是dom，而vue.js操作的是数据，从而屏蔽了复杂晦涩难懂的dom结构。和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是组件，是数据，也更加符合面向对象的方式
1. 双向绑定

1. 1. v-model.html

双向绑定：通过指令v-model，修改一方同时修改相同的另一方，达到数据同时更新

el：绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值
methods：绑定的方法，注意：其中this代表Vue对象

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

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

</head>

<body>

<div id="app">

<input type="text" name="address" v-model="address"/>

</div>

</body>

<script>

new Vue({

el: "#app",

data: {

address: "北京天安门"

}

});

</script>

</html>

验证

页面输入框的内容，数据自动改变 console.log(v.val)
通过chrome的调试窗口，改变数据，页面自动实现改变

转存失败重新上传取消

1. 1. 观察者设计模式

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇就来自对经典设计模式的应用。所以如何只会写代码，那你只是个码农；如何能领会其奥义，你就有了高级程序员的潜力；如果你能应用，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了“观察者设计模式”。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

转存失败重新上传取消

可以看到Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue监控数据的获取（get），数据的更新（set）。这样当数据变化，Vue就能知道，当其变化它就会通知渲染组件，重新进行渲染。

1. 基础用法
  1. hellovue2.html

上面的案例是传统写法，主流写法更习惯匿名函数的方式。初学者要慢慢适应并熟练匿名函数的方式，这样的代码结构更加简洁。

匿名方式，改造如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

    <script src="js/vue.js" type="text/javascript"></script>

</head>


<body>

      <div id="app">

        <p>{{message}}</p>

      </div>

</body>

  <script>

    new Vue({

      el : '#app',

      data :  {

        message: "Hello Vue."

      }

    })

  </script>

</html>

1. 1. expression.html
el：绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>VUE 表达式</title>

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

</head>

<body>

<div id="app">

<ul>基本运算符：

<li>加法：{{ 3+3 }}</li>

<li>拼接：{{ "3"+"3" }}、{{ 3+"3" }}、{{ '3'+"3" }}</li>

<li>减法：{{ "3"-"3" }}、{{ 3-2 }}</li>

<li>乘法：{{ "2"*"3" }}、{{ 3*2 }}</li>

<li>除法：{{ 3/3 }}、{{ 3/"3" }}、{{ 3/"2" }}、{{ 10/3 }}</li>

</ul>

<ul>三目运算：

<li>{{ age>18 ? "老男人":"小鲜肉" }}</li>

</ul>

<ul>字符串：

<li>信息内容：{{ message }}</li>

<li>信息长度：{{ message.length }}</li>

<li>截串：{{ message.substring(1,3) }}</li>

</ul>

<ul>数组：

<li>数组：{{ hobbys}}</li>

<li>长度：{{ hobbys.length}}</li>

<li>元素：{{ hobbys[1] }}</li>

</ul>

<ul>对象：

<li>{{ girlFriend.name}}</li>

<li>{{ girlFriend.age}}</li>

<li>{{ girlFriend.msg}}</li>

</ul>

</div>

</body>

<script>

new Vue({

el: '#app',

data: {

name: "tony",

age: 15,

message: "这是一个帅小伙",

hobbys: ["文学","历史","武术"],

girlFriend: {

name: "如花",

age: 16,

msg: "这是一个如花少女"

}

}

});

</script>

</html>

1. 1. object.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/vue.js" type="text/javascript"></script>

  </head>

  <body>

    <div id="app">

      json: {{ people }}<br />

      {{ people.age}}<br />

      {{ people.sex }}<br />

    </div>

  </body>



  <script>

  var v = new Vue({

    el: "#app",

    data: {

      people : {

        name : "tony",

        age : 18,

        sex : "man"

      }

    }

  });

  </script>

</html>

1. 1. methods.html

双向绑定：通过指令v-model，修改一方同时修改相同的另一方，达到数据同时更新

el：绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值
methods：绑定的方法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="js/vue.js" type="text/javascript"></script>

</head>

<body>

<div id="app">

{{ sayHello() }}

{{ whatColor('pink') }}

</div>

</body>



<script>

new Vue({

el: "#app",

methods: {

sayHello: function(){ //无参有返回值

return "hello tony";

},

whatColor: function( color ){ //有参无返回值

alert(color);

}

}

});

</script>

</html>

1. 1. people.html

双向绑定：通过指令v-model，修改一方同时修改相同的另一方，达到数据同时更新

el：绑定到指定名称的html标签上
data：绑定的数据，相当于给html中使用的时候所传的值
methods：绑定的方法，注意：其中this代表Vue对象

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/vue.js" type="text/javascript"></script>

  </head>

  <body>

    <div id="app">

      json: {{ people }}<br />

      {{ people.age}}<br />

      {{ people.sex }}<br />

      {{ sayName()}}<br />

      {{ whatColor('pink') }}



      {{ address }}

    </div>

  </body>



  <script>

  var v = new Vue({

    el: "#app",

    data: {

      people : {

        name : "tony",

        age : 18,

        sex : "man"

      },

      address: "北京大钟寺"

    },

    methods: {

      sayName : function(){

        return this.people.name;

      },

      whatColor : function( color ){

        alert(color);

      }

    }

  });

  </script>

</html>

1. 1. 小结

可以看到Vue这类为何称为框架，名副其实，当之无愧。写javascript时，我们要先去学习其复杂的api，写jQuery时，我们要先去学习其复杂的api，特别它的写法虽然简洁，却晦涩难懂，初学者极易写错。而Vue框架结构搭建好，就剩下修改数据和展示数据，而其结构非常简单，一看就会，如调用信息{{message}}，就是这么豪横，还等什么，快速拥抱它吧。

1. 特色用法
  1. v-on.html

@click为v-on:click的缩写

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

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

</head>

<body>

<div id="app">

<button v-on:click="whoClick('bj')">北京</button>

<button @click="whoClick('xa')">西安</button>

</div>

</body>

<script>

new Vue({

el: "#app",

methods:{

whoClick: function( who ){

alert(who);

}

}

})

</script>

</html>

1. 1. command.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>VUE 指令</title>

<script src="js/vue.js" type="text/javascript"></script>

</head>



<body>

<div>

v-text          设置标签中的文本<br/>

v-html                           设置标签中的html<br/>



v-if                                判断条件<br/>

v-show                          判断表达式的值，true则显示，false则隐藏<br/>



v-for                              循环<br/>

v-on                              注册事件<br/>

</div>



<div id="app">

<h3>文字：</h3>

<p>v-text： <span v-text="name"></span></p>

<p>v-html：<span v-html="html"></span></p>

<p v-for="o in object">{{ o }}</p>

<p v-for="(v,k,i) in object">属性名：{{ k }}，属性值：{{ v }}，下标值：{{ i }}</p>



<h3>v-if 展现：</h3>

<p v-if="object.age==17">object.age==17</p>

<p v-else-if="object.age==18">object.age==18</p>

<p v-else-if="object.age==20">object.age==20</p>

<p v-else>else结果</p>



<h3>v-show 展现：</h3>

<p v-show="false">不展现</p>

<p v-show="object.age>17">true展现</p>

<p v-show="object.name.length==2">false隐藏</p>



<h3>v-for 遍历数组：</h3>

<ul><li v-for="h in hobbys">{{ h.name?h.name:h }}</li></ul>

<ul><li v-for="(h,i) in hobbys">{{ h.name?h.name:h }}、{{i}}、{{ hobbys[i] }}</li></ul>



<h3>v-on 注册事件：</h3>

<p>

<button v-on:click="click()">无参-单击</button>

<button v-on:dblclick="click">无参-双击</button>

<div v-on:mouseover="say('足球')" style="border:1px solid red; margin: 10px;">有参-移入</div>

<div v-on:mouseout="say('乒乓球')" style="border:1px solid red; margin: 10px;">有参-移出</div>

</p>

</div>

</body>



<script type="text/javascript">

var people = {

name : "王强",

age: 20,

sex: "男"

}



// 创建一个 Vue 实例或 "ViewModel"

// 它连接 View 与 Model

var v = new Vue({

el : '#app',

data : {

name: "应用名",

age: 18,

html: "<font style='color:red'>HTML文字</fond>",

object: people,

hobbys: ["男","女","未知", people]

},

methods:{

click: function(){

alert(1);

},

say: function( hobby ){

alert(this.name+"的年龄："+this.age+"，爱好是："+hobby);

}

}

});

</script>



</html>

1. 1. axios.html

封装了ajax支持更好，特别在异步处理方面，所有Vue中推荐使用axios（ajax input output system）。

https://api.coindesk.com/v1/bpi/currentprice.json

{"time":{"updated":"Nov 29, 2019 01:02:00 UTC","updatedISO":"2019-11-29T01:02:00+00:00","updateduk":"Nov 29, 2019 at 01:02 GMT"},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org","chartName":"Bitcoin","bpi":{"USD":{"code":"USD","symbol":"$","rate":"7,497.1083","description":"United States Dollar","rate_float":7497.1083},"GBP":{"code":"GBP","symbol":"£","rate":"5,806.2780","description":"British Pound Sterling","rate_float":5806.278},"EUR":{"code":"EUR","symbol":"€","rate":"6,808.4390","description":"Euro","rate_float":6808.439}}}

axios.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

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

<script src="js/axios.min.js"></script>

</head>

<body>

<div id="app">

<p>{{info}}</p>

<p>{{info.data.time.updated}}</p>

<p>{{ info.data.bpi.USD.rate }}</p>

</div>

</body>

<script>

new Vue({

el: '#app',

data(){

return {

info: null

}

},

mounted(){

axios

.get('https://api.coindesk.com/v1/bpi/currentprice.json')

.then(response => (this.info = response))

.catch(e => ( console.log("error:"+e)))

}

})

</script>

</html>

注意：

axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。

ajax/postman一般采用@RequestParam接收参数：

@ResponseBody

public Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收参数

@ResponseBody

public Result testget(@RequestBody Map map) {}

UkeLiu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
十分钟带你学会Vue

Vue概念同类产品 JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被“鄙视”的脚本语言的前身。 ...
复制链接

扫一扫