Vue 快速体验
Vue 快速体验
Vue 介绍
Vue 是什么
Vue.JS是优秀的前端 JavaScript 框架 react/angular/vue
库和框架的区别:
- 库(如jQuery) 库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
- 框架 框架提供了一套完整解决方案, 使用者要按照框架所规定的某种规范进行开发
为什么要学习 Vue
传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt
随着项目业务场景的复杂,传统模式已无法满足需求
就出现了Angular/React/Vue等框架
- 企业需求
- 主流框架之一(React Angular Vue)
- 易用、灵活、高效
Vue 能做什么
- 最大程度上解放了 DOM 操作
- 单页web项目(SinglePageApplication项目,例如Worktile官网)开发
- 传统网站开发
核心特性
- 双向数据绑定
- vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)
- 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
- 解耦视图与数据
- 可复用组件
- 虚拟DOM
- M-V-VM
- 数据驱动视图
一些链接
Vue 起步
安装Vue
直接下载源码然后通过路径引入
- 开发版本：<https://vuejs.org/js/vue.js>
- 生产版本：<https://vuejs.org/js/vue.min.js>CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>使用 npm 下载（默认安装最新稳定版) 然后通过路径引入
npm init -y
npm i vueVue.js 不支持 IE8 及其以下版本
HelloWorld
作用:将数据应用在html页面中
1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...
new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据<!-- 我是Vue所管理的视图div#app -->
<div id="app">
<!-- 在视图里使用Vue实例中data里面的list数据 -->
<p>{{list}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: '我是模拟发起ajax请求后从服务端返回的数据'
}
})
</script>Vue 实例的选项(重要)
el
- 作用:当前Vue实例所管理的html视图
- 值:通常是id选择器(或者是一个 HTMLElement 实例)
- 不要让el所管理的视图是html或者body!
data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
- 可以通过
vm.$data访问原始数据对象 - Vue 实例也代理了 data 对象上所有的属性，因此访问
vm.a等价于访问vm.$data.a - 视图中绑定的数据必须显式的初始化到 data 中
methods
- 其值为可以一个对象
- 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
- 方法中的
this自动绑定为 Vue 实例。 - 注意，不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.a将是 undefined
代码演示
<div id="a">
{{msgA}} -- {{fn1()}}
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
// el作用:指定当前Vue实例所管理的视图,值通常是id选择器
// 1. el的值可以是css选择器,通常是id选择器
// 2. el的值不能是html标签和body标签
el: '#a',
// data作用:指定当前Vue实例的数据对象
// 1. data中的数据是响应式数据
// 2. 值可以是一个对象 {属性: 值}
// 3. 所有数据部分写在data中
// 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
// 5. 可以通过vm.$data.属性 访问数据
// 6. 可以通过vm.属性 访问数据(更简单)
data: {
msgA: '第一个Vue实例对象'
},
// methods作用:指定当前Vue实例中的方法
// 1. 可以直接通过vm实例访问这些方法，
// 2. 方法中的 this 自动绑定为 Vue 实例。
// 3. 不推荐使用箭头函数
methods: {
fn1: function() {
console.log(this.msgA);
console.log('vm实例中的methods里的fn1方法被调用');
},
fn2: function() {
this.fn1();
console.log('fn2方法被调用--');
},
fn3: () => {
console.log(this);
}
}
});
// 调用fn2方法
vm.fn2();
// 调用fn3方法
vm.fn3();
</script>除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解
术语解释
插值表达式
作用:会将绑定的数据实时的显示出来: 通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
{{js表达式、三目运算符、方法调用等}} 不能写 var a = 10; 分支语句 循环语句
<div id="app">
<!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
{{message}}
<p>{{message}}</p>
<p>{{message+'啦啦啦'}}</p>
<p>{{age>18?'成年':'未成年'}}</p>
<p>{{message.split("")}}</p>
<!-- 在插值表达式中不能写js语句 -->
<p>{{var a = 10}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
}
});
</script>插值表达式中不能写js语句, 如var a = 10;
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
Vue框架提供的语法 扩展了HTML的能力 减少DOM操作
<div id="app">
<p> {{message}}</p>
<!-- v-on就是vue给标签元素提供的扩展-指令
v-on指令就是给标签绑定事件,这里是click,
当事件处于点击状态时,出发methods中的changeMsg方法
-->
<button v-on:click="changeMsg">按钮</button>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
},
methods: {
changeMsg: function() {
this.message += "啦";
}
}
});
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。