前端知识(一)04 Vue.js入门-谷粒学院
一、介绍
1、Vue.js 是什么
在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。
Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。
官方网站：https://cn.vuejs.org
2、初识Vue.js
创建文件夹vue_pro
创建文件夹vuejs，将vue.min.js引入文件夹
创建 hello.html
<body>
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
//绑定vue作用的范围
el: '#app',
//定义页面中显示的模型数据
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作
data: {
message: 'Hello Vue!'
}
也可以写成
data() {
return {
message: 'Hello Vue!'
}
}
二、基本语法
1、基本数据渲染和指令
创建 01-基本数据渲染和指令.html
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'Helen'
}
})
</script>
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
<div id="app">
<!-- 数据绑定在html属性中，使用 v-bind 指令 -->
<h1 v-bind:title="name">{{name}}</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="name">{{name}}</h1>
</div>
2、双向数据绑定
创建 02-双向数据绑定.html
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword: '尚硅谷'
}
})
</script>
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="keyword">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="keyword">
<p>您要查询的是：{{keyword}}</p>
</div>
什么是双向数据绑定？
- 当数据发生变化的时候，视图也会跟着发生变化
数据模型发生了改变，会直接显示在页面上 - 当视图发生变化的时候，数据也会跟着同步变化
用户在页面上的修改，会自动同步到数据模型中去
3、事件
创建 03-事件.html
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<div id="app">
<button v-on:click="show()">查询</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log(new Date())
}
}
})
</script>
v-on 指令的简写形式
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>
4、修饰符
创建 04-修饰符.html
修饰符是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为
<div id="app">
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为 -->
<form action="save" v-on:submit.prevent="check()">
姓名：<input type="text" v-model="user.username">
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user: {}
},
methods: {
check(){
console.log(this.user.username)
if(!this.user.username){
alert('请输入姓名')
return
}
//ajax提交
console.log('ajax提交')
}
}
})
</script>
5、条件渲染
创建 05-条件渲染.html
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现
<div id="app">
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：协议内容.</h1>
<h2 v-else>no</h2>
<!-- v:show 条件指令 初始渲染开销大 -->
<h3 v-show="ok">show：协议内容.</h3>
<h4 v-show="!ok">no</h4>
</div>
6、列表渲染
创建 06-列表渲染.html
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ username: 'helen', age: 18 },
{ username: 'peter', age: 28 }
]
}
})
</script>
v-for：列表循环指令
<div id="app">
<table style="border:1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
7、实例生命周期
创建 07-vue实例的生命周期.html
<div id="app">
<h3 id="h3">{{ message }}</h3>
</div>
分析生命周期相关方法的执行时机
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '床前明月光'
},
// 页面在内存中已经初始化完毕：
// 可以操作 data 中的数据、调用methods中的方法
// 但是数据尚未被渲染到页面中：用户看不见
created() {
console.log('created')
//可以操作 data 中的数据
console.log(this.message)
//可以调用methods中的方法
this.show()
//无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
console.log(document.getElementById('h3').innerText)
},
// 数据已经被渲染到页面中
mounted() { // 第四个被执行的钩子方法
console.log('mounted')
//可以取出dom节点取数据，说明用户已经在浏览器中看见内容
console.log(document.getElementById('h3').innerText)
},
methods: {
show() {
console.log('show方法被调用')
}
},
})
</script>
前端知识(一)04 Vue.js入门-谷粒学院的更多相关文章
- 前端知识(二)05-Eslint语法规范检查-谷粒学院
目录 一.ESLint简介 二.启用ESLint 1.ESLint插件安装 2.插件的扩展设置 3.确认开启语法检查 三.ESLint规则说明 1.规则说明 2.语法规则 一.ESLint简介 ESL ...
- 前端知识(二)01-NPM包管理器-谷粒学院
目录 一.简介 二.使用npm管理项目 1.项目初始化 2.修改npm镜像 3.npm install命令的使用 4.其它命令 一.简介 什么是NPM NPM全称Node Package Manage ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 为什么43%前端开发者想学Vue.js
根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...
- Vue.js入门（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
随机推荐
- OS第六章
OS第七次实验 多进程 添加一个进程体 添加进程B,首先设置i的初值为0x1000,这样来方便程序运行时的时候能区分.其余地方与A一致. 相关变量和宏 Minix中定义了一个数组,叫做tasktab的 ...
- Spring Cloud Ribbon之URL重构（三）
接着前面的说,前两篇中分析了解析和动态服务列表的获取,这两步完成后那接下来要做的事就是重组解析后的URL路径和发起通信了,这一步完成应该是在前面分析的RibbonLoadBalancerClient. ...
- Python高级语法-GIL-理解（4.1.1）
@ 目录 1.结论 2.代码 关于作者 1.结论 当一个py文件执行多进程的时候,是真的在并发 当一个文件在使用多线程的时候,伪并发,在同一时刻只有一个线程执行,因为GIL Guido都说了,不好除这 ...
- 一个shell程序
使用vi写一个shell程序 touch cdlog echo "cd /app/mycrm/log" >> cdlog chmod +x cdlog 执行: ...
- day020|python之面向对象基础2
面向对象基础2 目录 面向对象基础2 7 对象与类型 7.1 类即类型 7.1.1 变量的三个指标 7.1.2 变量类型 7.2 list.append()方法原理 8 对象的高度整合 8.1 通过面 ...
- 动态SQL基本语句用法
1.if语句 如果empno不为空,则在WHERE参数后加上AND empno = #{empno},这里有1=1所以即使empno为null,WHERE后面也不会报错. 映射文件 <selec ...
- kaggle入门题Titanic
集成开发环境:Pycharm python版本:2.7(anaconda库) 用到的库:科学计算库numpy,数据分析包pandas,画图包matplotlib,机器学习库sklearn 大体步骤分为 ...
- MySQL性能分析show profiles详解
前言 前几篇文章我们讲了什么是 MySQL 索引,explain分析SQL语句是否用到索引,以及索引的优化等一系列的文章,今天我们来讲讲Show profiles,看看SQL耗时到底出现在哪个环节. ...
- 对象、对象监视器、同步队列、执行线程关系(synchronized的实现细节或原理)
synchronized在使用的时候底层细节你了解吗,相信很多同学对细节很少关注:比如竞争失败了的线程怎么安置,每个对象的监视器,线程执行synchronized时,其实是获取对象的监视器才能进入同步 ...
- 详细介绍如何自研一款"博客搬家"功能
前言 现在的技术博客(社区)越来越多,比如:imooc.spring4All.csdn.cnblogs或者iteye等,有很多朋友可能在这些网站上都发表过博文,当有一天我们想自己搞一个博客网站时就会发 ...