大白话讲解Vue前端框架
首先介绍一个很不错的网站:http://www.runoob.com/vue2/vue-tutorial.html
我们在不知道一些语法的时候,可以过来查询。
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
简而言之就是别人开发好的一个框架,我们在前人的基础上使用这个框架能够很快开发出比较炫酷的网页。
1,首先说一下Vue的安装。两种方式:
A:我们可以在官网https://cn.vuejs.org直接下载Vue.min.js文件,并用 <script> 标签在HTML中引入。地址如下:Vue.js下载
B:使用CDN的方法(设置多个节点服务器,分布在不同区域中,便于用户进行数据传递和访问。当某一个节点出现问题时,通过其他节点仍然可以完成数据传输工作,可以提高用户访问网站的响应速度。 )
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>
</body>
</html>
2,Vue.js的模板
每个Vue应用都是通过实例化Vue来实现的,模板如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body><div id="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>{{details()}}</h1></div><script type="text/javascript">var vm = new Vue({el: '#vue_det',data: {site: "菜鸟教程",url: "www.runoob.com",alexa: "10000"},methods: {details: function() {return this.site + " - 学的不仅是技术,更是梦想!";}}})</script>
</body>
</html>
3,使用步骤
1. 下载js文件, 或者引入cdn的js文件<script src="js/vue.js"></script>或<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>2. 开始使用vue<div id="x">{{msg}}</div><script>var v = new Vue({el:"#x",data:{msg:"一二三四五, 上山打老虎",msg2:"哈哈哈"}});</script>
实例: 指的是创建出的Vue对象 v
挂载点: 任何一个被Vue对象绑定的 具备id属性的 元素!
模版: 指的是挂载点中显示的内容 , 可以在标签内部 使用插值表达式({{key}}),也可以通过Vue实例的template属性实现 (template 属性中内容必须被html标签包含)
4,内容的简单介绍
插值表达式:
语法格式:{{data中的数据key}}
用于在挂载点中, 加入数据显示效果 , 通过在挂载点中, 编写{{data中的数据key}} , 可以将data中的某数据 与 挂载点中显示效果进行关联
Vue对象中 data中的数据
包含多个键值对 , 在Vue中使用data数据时, 数据是响应式的 , 当数据更改时, 对应的视觉效果 也会一起更改 !
当我们需要显示 data 数据时, 如何操作:
1. 使用插值表达式 2. v-text属性="data中的数据key"3. v-html属性="data中的数据key"案例:<div id="x"><div>{{msg1}}</div><div v-text="msg2"></div><div v-html="msg3"></div></div><script>var v= new Vue({el:"#x",data:{msg1:"<h3>一二三四五<h3>",msg2:"<h3>上山打老虎</h3>",msg3:"<h3>哈哈哈哈哈</h3>"}});</script>v-text与v-html区别:v-text : 不会解析HTML内容, 而是直接显示data中的数据,会显示特殊的<>符号v-html : 会将data中的数据, 先进行html标签解析, 再显示效果
模板指令: 事件指令
格式1.步骤1. 在dom元素中, 添加属性:v-on:事件名="函数名称"步骤2. 在Vue对象中, 添加属性methods, methods是JSON对象,包含一个个的键值对, 值为function 格式2.属于格式1的简写方式:将格式1中的步骤1修改为: 在dom元素中, 添加属性:@事件名="函数名称" 即可 !案例1:<div id="x"><button v-on:click="x1">{{msg}}</button><button v-on:click="x2">{{msg}}</button></div><script>new Vue({el:"#x",data:{msg:0},methods:{x1:function(){this.msg++;},x2:function(){this.msg--;}}});</script>案例2:<div id="x" @click="x1" v-html="msg"></div><script>new Vue({el:"#x",data:{msg:'<img src="data:images/20.jpg" style="width:200px">'},methods:{x1:function(){this.msg = '<img src="data:images/20.jpg" style="width:700px">';}}});</script>
模板指令 - 属性绑定
语法格式1:使用 v-bind:属性名称="data中的key"语法格式2: 语法1的简写, 使用 :属性名称="data中的key" 案例:<div id="x"><img v-bind:src="img" @click="x1"></div><script>new Vue({el:"#x",data:{img:"images/21.jpg"},methods:{x1:function(){this.img="images/22.jpg"}}});</script>
模板属性 : 数据属性双向绑定 ( 仅用于input标签 )
具体语法实现, 与普通属性绑定基本一致:v-model="data中的数据key"案例:<div id="x"><input v-model="msg"><div>{{msg}}</div></div><script>var v = new Vue({el:"#x",data:{msg:"一二三四五"}});</script>
Vue的计算属性
表示一个属性, 是通过其他多个属性计算得到的 !格式:computed:{计算属性名1:function(){//运算逻辑return 属性值;},计算属性名2:function(){//运算逻辑return 属性值;}...}特点:如果参与计算的多个属性 没有发生改变, 则每次使用的计算结果 都为 缓存结果 !如果参与计算的属性 发生了改变, 则每次使用 都会重新运算 !案例:<div id="x"><input v-model="firstName" placeholder="请输入姓"><input v-model="lastName" placeholder="请输入名"><h3>{{fullName1}}</h3><h3>{{fullName2}}</h3></div><script>var v=new Vue({el:"#x",data:{firstName:"",lastName:""},computed:{fullName1:function (){return this.firstName+this.lastName;},fullName2:function (){return this.firstName+" "+this.lastName;}}});</script>
侦听器
用于侦听data中属性, 或 计算属性的变化. 侦听器表示一个个等待执行的代码块, 当被侦听的属性发生改变时, 则代码块自动执行 !格式:在vue实例中 添加属性: watch:{侦听的属性名1:function(){},侦听的属性名2:function(){},...}案例:<div id="x"><input v-model="firstName" placeholder="请输入姓"><input v-model="lastName" placeholder="请输入名"><h3>{{fullName1}}</h3><h3>{{fullName2}}</h3><h3>姓被改变{{count1}}次 ,名被改变{{count2}}次, 全名1被改变{{count3}}次, 全名2被改变{{count4}}次</h3></div><script>var v=new Vue({el:"#x",data:{firstName:"",lastName:"",count1:0,count2:0,count3:0,count4:0},computed:{fullName1:function (){return this.firstName+this.lastName;},fullName2:function (){return this.firstName+" "+this.lastName;}},watch:{firstName:function(){count1++;},lastName:function(){count2++;},fullName1:function(){count3++;},fullName2:function(){count4++;}}});</script>
模板指令 v-if
作用: 用于判断是否加载元素 , 如果结果为true , 则加载此元素 , 如果结果为false 则不加载此元素常用在网页权限管理页面: 语法格式:给元素添加属性: v-if="条件表达式|data中的key" (可以直接编写true或false , 不过没有意义 !)案例:<div id="x"><img src="data:images/24.jpg" v-if="flag"><button @click="x1">显示</button> <button @click="x2">隐藏</button></div><script>var v=new Vue({el:"#x",data:{flag:true},methods:{x1:function(){this.flag=true;},x2:function(){this.flag=false;}}});</script>
模板指令 v-show
作用: 用于判断是否显示元素 , 如果结果为true , 则显示此元素 , 如果结果为false 则不隐藏此元素常用在网页权限管理页面: 语法格式:给元素添加属性: v-show="条件表达式|data中的key" (可以直接编写true或false , 不过没有意义 !)
案例:<div id="x"><img src="data:images/24.jpg" v-show="flag"><button @click="x1">显示</button> <button @click="x2">隐藏</button></div><script>var v=new Vue({el:"#x",data:{flag:true},methods:{x1:function(){this.flag=true;},x2:function(){this.flag=false;}}});</script>
v-if 与 v-show的区别:
v-if : 控制的是元素是否加载 , 当为false时, 直接从网页中移除元素 !
v-show : 控制的是元素是否显示 , 无论true或false,元素都会加载, 只是false时,元素display:none!
模板指令 v-for
作用:用于在网页中,循环展示数组数据 !语法格式1:给元素添加属性: v-for="item of 数组名" , 注意数组名为 data中的数据key , 值为数组语法格式2:给元素添加属性: v-for="(item,index) of 数组名" , 注意数组名为 data中的数据key , 值为数组在上述的两种语法格式中, item : 表示每次循环时得到的数据 ,在标签中 可以通过插值表达式 显示 {{item}}index : 表示每次循环时数据的索引 ,在标签中 可以通过插值表达式 显示 {{index}}案例:<div id="x"><ul><li v-for="item of list">{{item}}</li></ul></div><script>var arr = ["床前明月光","玻璃好上霜","床上及时擦","整不好得脏","哈哈哈哈哈","嘿嘿嘿嘿嘿"];var v=new Vue({el:"#x",data:{list:arr}});</script>
大白话讲解Vue前端框架相关推荐
- 2021 年 Angular vs. React vs. Vue 前端框架对比
2021 年 Angular vs. React vs. Vue 前端框架对比 一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...
- 使用Vue前端框架实现知乎日报app
使用Vue前端框架实现知乎日报app 这是:主页代码 <template><view class="content"><view class=&quo ...
- vue前端框架有哪些
vue前端框架有哪些 2022-02-23 · Worktile 项目协作工具 vue前端UI框架有:1.Element 2.iview 3.vuetify 4.vue-strap 5.cube-ui ...
- 分布式电商项目十四:Vue前端框架简介及使用
Vue前端框架简介及使用 就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发.由于前端不是我们的主要内容,所以只介绍简单的使用内容.具体更深的内容请参考Vue的官方网 ...
- Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板 演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
- Vue前端框架选型论述
Vue前端框架选型论述 1. 前端3大巨头框架综述 React 起源于 Facebook 的内部项目,社区非常活跃,下载使用当前排行第一名,但是 React 的只能是半开源,在不涉及到 Faceboo ...
- 搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
- 基于vue前端框架_基于前端访问控制框架的Vue
基于vue前端框架 权限访问控制 (vue-access-control) Vue-Access-Control is a solution of front-end user rights cont ...
- html接入qq客服,Vue 前端框架接入QQ在线客服
Vue 前端框架接入QQ在线客服,效果如下图: 后面就根据自己的需要选择不同的方式,下面是使用教程: ------------------------------------------------- ...
最新文章
- @MySQL为表字段添加索引
- mysql if countif_关于EXCEL IF COUNTIF 在查找数据的用法
- linux nvme分区,这些 loop 分区是什么鬼东西?
- vb 实现小超市饮料补货提醒程序 public全局变量的声明与初始化
- 轻量级.Net Core服务注册工具CodeDi发布啦
- hive2 java连接_用Java代码通过JDBC连接Hiveserver2
- 大数据统计学直观图表(二)
- InstallShield 2008 终止声明 (EOL)对最终客户意味着什么
- 必看!超详细的电子元器件选型经验分享
- linux 下bt远程下载,在Linux服务器上配置Transmission来离线下载BT种子
- linux usb有线网卡驱动_Linux下安装USB网卡驱动
- 计算文件MD5值的多种方法
- java 区分鼠标左键单击和双击
- matlab中position用法_Matlab中的zeta函数用法
- 一个节拍都不错过——dfuse 2019年第三季度回顾
- IPSec IKEV2
- 怎样解决ip访问受限问题
- Windows fatal exception: code 0xe06d7363
- 数字化孪生管理平台运用现状及技术前景
- 计算雅思成绩C语言,雅思总成绩计算四舍五入查分表