目录
vue的介绍学习vue需要的前置知识：mvvm模型导入vuehelloworld示例首发日期：2019-01-19
有时候，一个后端开发者“不得不”自己去搭建前端界面。如果有的选，当然选一个比较好学的前端“框架”咯（框架很多时候封装了普通的html元素，使得能更加方便地使用）。
如果你做的项目的界面是一个偏后台管理的而且要求并不高的界面的时候，你可以考虑easy ui这个较为知名的前端框架。
如果你想要界面变得好看一些（easy ui的界面太简单了，缺乏较强的定制性），那么你可以考虑vue这个框架。vue这个框架本身并没有多少好看的样式，但学习了这个框架就可以学会怎么使用它的第三方组件库了（这些第三库看起来都还行）。
【vue自己有官方教程，为什么写这个呢？主要是感觉自己的前端知识不太稳固，看教程的时候有点迷糊。推己及人，所以有了这个博文】
例如下面的代码可以快速构建一个表格：
<template> <el-table :data="tabledata" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tabledata: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>vue不支持ie8 及以下版本，因为 vue 使用了 ie8 无法模拟的 ecmascript 5 特性。但它支持所有兼容 ecmascript 5 的浏览器。【所以如果项目兼容性要求较高，那么不适合使用vue】
【常见的mvp前端开发有几个步骤：1.创建页面元素，2.在script中给元素绑定事件，3.在script中处理事件（这个事件可能会影响页面的元素的显示或返回数据）】
【上面的几个步骤可以说是内容（页面元素）行为（js操作）分离了】
【为什么要有mvvm呢？主要是mvp模式有太多的dom操作了（大量的dom 操作使页面渲染性能降低，加载速度变慢）。mvvm解决了这个问题，并且提供了一些其他的好处。】
【如果你了解orm模型，你应该很能体会到mvvm模型的好处，有了vm层帮我们管理了数据，我们就只需要处理好model层了，这就好像orm中定义了数据映射关系，然后我们只需要操作实体类。】
【要想使用vue，必须先导入/安装，就像使用jquery必须导入jquery.js一样；而vue可以使用webpack来构建，所以也可以使用webpack安装vue，但如果你是初学者，先掌握静态导入的方法吧】
vue的本质也是javascript,所以它也可以通过导入js文件来使用功能（js可以用cdn的，也可以手动导入本地的vue.js）。
这种也是最简单的使用vue的方式，所以我们可以这种方式来作为入门学习，但正式使用时都会使用webpack来构建vue项目。
在html文件中使用如下代码：【这里先讲导入，后面讲使用】
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
npm install vue全局安装vue-cli: npm install --global vue-cli创建一个基于 webpack 模板的新项目:vue init webpack 项目名在入门部分将使用js导入方式的例子，在涉及构建多个组件的时候（页面需要多个组件时，如果把多个组件定义在一个文件中会显得赘余。这好比把多个类放到同一个文件中定义。）将使用npm安装方式演示。
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <!--2.这是被vue实例管理的区域--> <div id="app"> {{ message }} </div> </body> <!--1.导入js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //3. 创建实例：new vue()里面有一个{}类型的参数，属性el是一个元素的id名，代表被vue实例管理的区域; var app = new vue({ el: '#app', data: { message: 'hello vue!' } }) </script></html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>定义一个元素，给它id起名app。[名字是可以随意的，但在下面的new vue创建实例时，el参数必须是这个id名]新建一个vue实例，属性el代表把对应元素区域交给vue管理（el: '#app'代表把id为app的区域交给vue管理）。那么对应元素区域里面就可以使用vue的语法了。data属性：data里面可以定义一系列变量，可用于这个实例掌控的区域。{{ message }} : vue语法的内容，代表获取变量名为message的数据，并显示出来。导入了js之后，vue把管理的区域里面的vue语法都解析了，所以 {{ message }}就取出了vue实例中名叫message的数据。
现在我们了解了一些vue的渲染页面的知识，下面我们来了解更多的渲染技巧。
每个 vue 应用都是通过使用 vue 函数创建一个新的 vue 实例开始的。
实例中的定义的内容就是我们可以使用在vue应用中的内容。
下面讲实例中可以定义哪些内容。
var app = new vue({ el: '#app', data: { message: 'hello vue!' } }) //<div id="app"> // {{ message }} //</div> <body> <div id="app"> <!-- 触发事件，建议使用vue的语法来绑定事件（@事件类型，代表绑定什么事件） --> <!-- 实例内定义的函数，使用vue的语法来绑定；实例外定义的，可以使用原生的方式绑定事件 --> <button @click="myfunction">按钮</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new vue({ el: '#app', data: { message: 'hello vue!' }, methods: { myfunction: function () { alert('haha') } } }) </script>【要结合图来看（懂英文是多么地好）】
beforecreate：在创建了vue示例时，在进行了一部分基础的初始化之后就会自动执行beforecreate函数created：创建完示例后，会自动执行created函数beforemounted：渲染完模板后（可以说是vue知道区域内是一个怎么的html环境，但还没把数据显示到这个环境中的时候），会自动执行这个函数mouted：模板与数据结合之后自动执行这个函数。【此时页面已经渲染完毕】beforeupdated：数据发生变化后，新数据被渲染前会自动执行这个函数。updated：新数据被渲染成功会自动执行这个函数。beforedestory：当实例被destory时会自动执行这个函数。destory：当实例被完全销毁是自动执行这个函数。【如果你对生命周期钩子感兴趣，可以自查，这里不多讲，后面之后根据开发需求来讲一些】
测试代码：
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <button @click='updatevalue'>点击触发beforeupdate,updated</button> <button onclick='deleteapp()'>点击触发beforedestory,destoryed</button> <p ref='a'>{{ msg }}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new vue({ el: '#app', data: { msg: 'hell人民和公民的区别o' }, beforecreate: function(){ console.log('beforecreate') }, created: function(){ console.log('created') }, beforemount: function(){ console.log(this.$refs.a) // 上面的你会看到undefined,因为数据还没绑定上 console.log('beforemount') }, mounted: function(){ console.log(this.$refs.a) // 上面的你会看到p,因为数据绑定上了 console.log('mounted') }, beforeupdate: function(){ console.log('beforeupdate') }, updated: function(){ console.log('updated') }, beforedestroy: function(){ console.log('beforedestory') }, destroyed: function(){ console.log('destoryed') }, methods: { updatevalue: function () { this.msg = 'haha' } } }) function deleteapp() { app.$destroy() } </script></html>在上面已经演示了使用mustache表达式(可以俗称插值表达式){{ }}来获取实例中的数据了，其实还可以使用其他方式来输出数据
v-text可以向元素中输出文本内容
婆婆雇凶杀儿媳<div id="app"> <span v-text="message"></span> <!-- message: 'hello vue!' --> <!-- var app = new vue({ el: '#app', data: { message: 'hello vue!' } }) --></div>v-html可以向元素中输出html内容：
<div id="app"> <span v-html="message"></span> <!-- message: 'hello vue!'(带标题样式的) --> </div> <!-- var app = new vue({ el: '#app', data: { message: '<h1>hello vue!</h1>' } }) -->mustache 语法不能作用在 html 特性上，也就是说在html元素中没有 id=”{{ id }}” 这样的操作 ，这种时候需要使用vue语法：v-bind:id=”id”
{{ }}里面可以使用javascript表达式，例如：{{ message.split(”).rever().join(”) }}
v-bind用于给元素的属性绑定值
绑定标题：v-bind:title <div id="app"> <span v-bind:title="message">悬浮几秒，查看标题</span> </div> <!-- var app = new vue({ el: '#app', data: { message: 'hello vue!' } }) -->给a元素绑定href ： v-bind:href=’xxx’给元素绑定id ： v-bind:id=’xxx’<!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a>
v-bind的参数可以是一个对象，是一个对象时，会把对象的所有属性都绑定到元素上。具体如下图。
<div id="app"> <p v-if="en">现在你看到我了</p> <!-- en: true 时渲染，en: fal时不渲染 --> </div> <!-- var app = new vue({ el: '#app', data: { en: fal } }) -->除了v-if,还有v-el和v-el-if，v-el不可以再带条件判断，v-el-if可以带条件判断。 <div id="app"> <h1 v-if="gender === '男'">男</h1> <h1 v-el-if="gender === '女'">女</h1> <h1 v-el>unknown</h1> </div> <!-- var app = new vue({ el: '#app', data: { gender: '女' }, }) -->使用v-el 的元素必须紧跟在带 v-if 或者 v-el-if 的元素的后面，否则它将不会被识别。
v-show 的元素始终会被渲染并保留在 dom 中。v-show 只是简单地切换元素的 css 属性 display。 <div id="app"> <h1 v-show="ok">hello!</h1> </div> <!-- var app = new vue({ el: '#app', data: { ok: true }, }) --> <div id="app"> <ol> <!-- 每一次迭代了出数据给todo，都会有一个li元素，并会在li元素中输出todo的text --> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <!-- var app = new vue({ el: '#app', data: { todos: [ { text: '学习 javascript' }, { text: '学习 vue' }, { text: '搞事情' } ] } }) --> 代码效果：
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。[这是来自官网的话，我觉得有点多余，感觉子元素获取父元素的数据是很正常的操作。]
v-for 还支持一个可选的第二个参数为当前项的索引，它会从0开始。用来标识当前迭代的是第几个元素。
可以用 of 替代 in 作为分隔符，因为它是最接近 javascript 迭代器的语法：
<div v-for="item of items"></div>
也可以用 v-for 迭代一个对象的所有属性，第一个参数是value，第二个可选参数是key，第三个可选参数为索引
第二个参数为key
<div v-for="(value, key) in object"> {{ key }}: {{ value }}</div>第三个参数为索引：
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }}</div>使用三个参数时的代码效果:
在遍历对象时，是按 object.keys() 的结果遍历，但是不能保证它的结果在不同的 javascript 引擎下是一致的。
v-for 也可以取一个整数作为源数据（v-for="i in 10"）。在这种情况下，它将重复多次模板。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。【这个问题官网提了一下，这里我也提一下，注意使用】
<div id="app"> <p>原消息: "{{ message }}"</p> <p>逆反后: "{{ reverdmessage }}"</p> </div> <!-- var app = new vue({ el: '#app', data: { message: 'hello' }, computed: { // 计算属性的 getter reverdmessage: function () {实习证明格式 // `this` 指向 vm 实例 return this.message.split('').rever().join('') } } }) -->下面的代码也可以达到上面的效果
（也是即时的，有人不懂为什么这个函数会重复调用，而非页面初始化时调用一次；因为当页面中数据更新的时候，涉及页面数据的函数也会重新执行。）
<div id="app"> <p>原消息: "{{ message }}"</p> <p>逆反后: "{{ reverdmessage() }}"</p> <p>{{ date.now() }}"</p> <!-- 后面的now是用来测试数据刷新时，函数会重新执行 --> </div> <!-- var app = new vue({ el: '#app', data: { message: 'hello' }, methods: { reverdmessage: function () { // `this` 指向 vm 实例 return this.message.split('').rever().join('') } } 痔疮该怎么治疗 }) -->函数也可以达到同样的效果，但是函数没有缓存效果，而计算属性有缓存。没有缓存时，函数每一次都要重新计算来得到结果，如果这是一个比较消耗资源的计算的话，那么会减慢页面的速度；而计算属性有缓存，只要内部的计算元素没有发生变化，那么会使用缓存来作为计算结果。
上面的计算属性达到效果需要留意计算元素的变化，你可能会想到一些类似的监听数据变化的方法，而vue中也是有这样的东西的。
下面的代码监听了firstname和lastname，当这两个数据变化的时候会重新给fullname赋值。
<div id="app"> <div>{{ fullname }}</div> </div> <!-- var app = new vue({ el: '#app', data: { firstname: 'foo', lastname: 'bar', fullname: 'foo bar' }, watch: { firstname: function (val) { this.fullname = val + ' ' + this.lastname }, lastname: function (val) { this.fullname = this.firstname + ' ' + val } } }) -->使用计算属性达到上面效果（显然省了不少代码）：
var vm = new vue({ el: '#demo', data: { firstname: 'foo', lastname: 'bar' }, computed: { fullname: function () { return this.firstname + ' ' + this.lastname } }}) <div id="app"> <div>{{ fullname }}</div> </div> <!-- var app = new vue({ el: '#app', data: { firstname: 'foo', lastname: 'bar' }, computed: { fullname: { // getter get: function () { return this.firstname + ' ' + this.lastname }, // tter t: function (newvalue) { var names = newvalue.split(' ') this.firstname = names[0] this.lastname = names[names.length - 1] } } } }) -->虽然计算属性已经提供了很多的好处，但有些时候计算属性也不能满足我们的要求。比如我们希望监听某个属性的变化来得到另一个属性的结果，但是不希望它马上得到结果，那么这时候计算属性就达不到需求了。而监听器里面可以写一些其他代码（比如一些延迟去得到结果的代码）。
当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。
为什么有时候不希望计算新结果那么快呢？这就好比有人在百度搜索中输入一个个字，如果每个字都要进行检索的话，那么就对百度来说开销就很大了，如果稍微等等，确认用户输入完毕再去计算，那么就节省了很多资源了，下面的来自官网的例子正是一种这样的考虑了资源开销的例子。
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="watch-example"> <p> ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <script> var watchexamplevm = new vue({ el: '#watch-example', data: { question: '', answer: 'i cannot give you an answer until you ask a question!' }, watch: { // 如果 `question` 发生改变，这个函数就会运行 question: function (newquestion, oldquestion) { this.answer = 'w杜鲁门总统aiting for you to stop typing...' this.debouncedgetanswer() } }, created: function () { // `_.debounce` 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率 // ajax 请求直到用户输入完毕才会发出。想要了解更多关于 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识， // 请参考：/d/file/titlepic/docs this.debouncedgetanswer = _.debounce(this.getanswer, 500) }, methods: { getanswer: function () { if (this.question.indexof('?') === -1) { this.answer = 'questions usually contain a question mark. ;-)' return } this.answer = 'thinking...' var vm = this axios.get('https://yesno.wtf/api') .then(function (respon) { vm.answer = _.capitalize(respon.data.answer) }) .catch(function (error) { vm.answer = 'error! could not reach the api. ' + error }) } } }) </script></html>
本文发布于:2023-04-03 13:40:35，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/544becee09c41d56781a57200eb15095.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：后端开发者的Vue学习之路（一）.doc
本文 PDF 下载地址：后端开发者的Vue学习之路（一）.pdf
| 留言与评论（共有 0 条评论） |
