vue介绍

1、什么是vue.js

是一套用于构建用户界面的渐进式框架。vue的设计可以自底层向上逐层应用。vue的核心库只关注视图层。可以为单页面应用提供驱动。

2、起步

下载vue.js jar包，引入页面进行运用。

不推荐直接使用vue-cli，尤其在不熟悉node.js的构建工具的时候。

3、声明式渲染

vue的核心就是使用简单的模板语言声明式的将数据渲染进DOM的系统。

<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app">{{message}}</div><script>var vm = new Vue({el:'#app',data:{message:'hello vue.js'}})</script></body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irI0u7La-1604128329147)(E:\政通路\课堂笔记\S3\vue英豪\vue\vue入门\assets\image-20200827155250678.png)]

我们创建了第一个vue应用。使数据和DOM建立了联系。

 <div id="app2"><span v-bind:title="msg">提示信息</span></div>var app2 = new Vue({el:'#app2',data:{msg:'页面提示'+new Date().toLocaleString()}})

v-bind特性称之为指令。带有v-，表示是vue提供的特殊特性。将元素节点的title特性和msg属性进行了一致性的保持。

4、条件与循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71DAjMs7-1604128329150)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870314654.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e36IR8Gm-1604128329152)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870325182.png)]

发现在控制台输app3.seen=false，会发现之前的“你好”，消失了

vue提供了一个强大过渡效果系统，可以在vue插入/更新/删除元素时，自动的过度应用效果

v-for指令绑定数组的数据渲染一个项目列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7CAtgC40-1604128329156)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871037825.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXjlJivV-1604128329157)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871050641.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DP5TzkHK-1604128329161)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871080828.png)]

在控制台输入app4.todos.push({text:‘maven’})，他会在列表后面添加一个新项目

5、处理用户输入

为了让用户和你的应用进行交互，可以用v-on指令添加一个事件监听器，通过它调用vue实例中定义的方法

<!--v-on指令--><div id="app5"><p>{{mm}}</p><button v-on:click="reversemm">翻转消息</button></div>var app5 = new Vue({el:'#app5',data:{mm:'abcdefg'},methods:{reversemm:function(){this.mm = this.mm.split('').reverse().join('')}}})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aj7O77wu-1604128329165)(C:\Users\ADMINI~1\AppData\Local\Temp\1563872080347.png)]

vue提供v-model指令，实现双向绑定

使用v-model实现表单输入和应用状态之间的双向绑定

<!--v-model双向绑定--><div id="app6"><p>{{msm}}</p><input v-model="msm" /></div>var app6 = new Vue({el:'#app6',data:{msm:'abcdefg'}})

6、组件化应用构建

组件系统是vue的另一个重要的概念。它是一种抽象的，允许我们使用小型、独立和通常可以复用的组件构建大型的项目。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGJYjvEu-1604128329168)(C:\Users\ADMINI~1\AppData\Local\Temp\1563935364848.png)]

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app"><ol><li>我是li标签</li><todo-item></todo-item></ol></div><script>//定义 todo-itme 是一个组件Vue.component('todo-item',{template:'<li>我是一个组件元素</li>'})new Vue({el:'#app',data:{}})</script></body>
</html>

本章回顾：

1、vue.js是一个渐进式的框架

2、下载vue.js的jar，引入页面

3、数据的加载语法：｛｛变量名｝｝，new一个事例 el 和 data

4、指令以v-开头，这是vue的特殊命令

5、组件化构建，什么是组件

作业：

1、下载vue.js,引入

</body>

```

本章回顾：

1、vue.js是一个渐进式的框架

2、下载vue.js的jar，引入页面

3、数据的加载语法：｛｛变量名｝｝，new一个事例 el 和 data

4、指令以v-开头，这是vue的特殊命令

5、组件化构建，什么是组件

作业：

1、下载vue.js,引入

2、把这章讲到的知识点，熟练运用，结合官方API

前端就业之vue介绍相关推荐

Web前端就业薪资是多少？Web前端要学什么？
Web前端开发作为实现前台页面展示的主要技术手段,已经越来越被大众所熟知,很多人也因此对Web前端产生了兴趣,萌生了想要学习Web前端的想法.那,Web前端就业薪资是多少?Web前端要学什么?今天,小 ...
【华为云技术分享】三大前端技术(React,Vue,Angular)探密（下）
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
如何在一年内从零基础到前端就业？
信息时代为我们带来了快节奏的生活,但是学习一门新的技术并不能一蹴而就.大家都知道前端开发是一个相对入门简单,对于零基础的小白都可以快速掌握的互联网技术方向.但是想要达到就业的水平,同样需要一定的学习周 ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
web前端程序员职位介绍
web前端程序员职位介绍: 1.1年以上React实际项目开发经验. 2.熟悉webpack配置. 3.熟悉ES6语法. 4.熟悉TypeScript编程语言. 5.熟悉antd ui框架. 计算机相 ...
自学Vue之路——Vue介绍及基本语法
今日内容概要前端发展介绍 Vue的快速使用插值语法指令系统之文本指令指令系统之事件指令指令系统之属性指令前端发展介绍 HTML(5).CSS(3).JavaScript(ES5.ES6.E ...
2019年web前端就业前景和工资待遇
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 2019年web前 ...
企业级前端项目组框架vue-fpg介绍
企业级前端项目组框架vue-fpg介绍 VUE-FPG是什么? VUE-FPG怎么用常用框架命令: 常用框架指令常用项目指令 VUE-FPG是什么? VUE-FPG是一套基于VUE框架和Webpa ...

前端就业之vue介绍

vue介绍

1、什么是vue.js

2、起步

3、声明式渲染

4、条件与循环

5、处理用户输入

vue提供v-model指令，实现双向绑定

6、组件化应用构建

本章回顾：

作业：

本章回顾：

作业：

前端就业之vue介绍相关推荐

最新文章

热门文章