一、介绍

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入门-谷粒学院的更多相关文章

  1. 前端知识(二)05-Eslint语法规范检查-谷粒学院

    目录 一.ESLint简介 二.启用ESLint 1.ESLint插件安装 2.插件的扩展设置 3.确认开启语法检查 三.ESLint规则说明 1.规则说明 2.语法规则 一.ESLint简介 ESL ...

  2. 前端知识(二)01-NPM包管理器-谷粒学院

    目录 一.简介 二.使用npm管理项目 1.项目初始化 2.修改npm镜像 3.npm install命令的使用 4.其它命令 一.简介 什么是NPM NPM全称Node Package Manage ...

  3. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  4. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  5. 前端开发之走进Vue.js

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

  6. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  7. 为什么43%前端开发者想学Vue.js

    根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...

  8. Vue.js入门(一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  9. 【前端芝士树】Vue.js面试题整理 / 知识点梳理

    [前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...

随机推荐

  1. Linux OOM Killer造成数据库访问异常排查

    服务器上的服务器访问异常,查看/va/log/messages发现如下: Sep 22 16:08:21 safeserver kernel: java invoked oom-killer: gfp ...

  2. WebSocket实现站内消息实时推送

    关于WebSocket WebSocket是HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议.什么是全双工?就是在同一时间可以发送和接收消息,实现双向通信,比如打电话.WebSocke ...

  3. 54 个官方 Spring Boot Starters 出炉!别再重复造轮子了…….

    在之前的文章,栈长介绍了 Spring Boot Starters,不清楚的可以点击链接进去看下. 前段时间 Spring Boot 2.4.0 也发布了,本文栈长再详细总结下最新的 Spring B ...

  4. x264编码demo定制修改介绍

    x264编码器,提供了两个demo来验证编码功能:一个是大而全的x264.c,另外一个是简洁版的example.c. 其中,前者demo,可以配置很多编码参数,但太冗长繁杂,对初学者不太友好.  后者 ...

  5. 认识ollydbg

    四个区域:汇编区:虚拟地址,机器码,汇编指令,注释: 寄存器区:寄存器,数据: 数据区, 栈. 这是上面按钮的作用 热键: Ctrl+F2 - 重启程序. Alt+F2 - 关闭被调试程序. F3 - ...

  6. 为什么spring 被@Repository注解标识注入后是代理类

    背景 今天发现一个奇怪的问题,有一个类是用的@Repository注解标识注入的,并且这个类并没有配置任何带代理和aop配置.但是得到的这个类不是一个原生类,而是一个代理类,如果换成了Componen ...

  7. [leetcode]120.Triangle三角矩阵从顶到底的最小路径和

    Given a triangle, find the minimum path sum from top to bottom.Each step you may move to adjacent nu ...

  8. Javaweb前台界面代码复用总结

    servlet声明定义message信息传给前天界面判断输出message: if(booknamelist.size()==0) { message="根据书名查询没有结果!"; ...

  9. JavaDailyReports10_20

    1 package varycode; 2 class Grandparent 3 { 4 public Grandparent() 5 { 6 7 System.out.println(" ...

  10. C#中存储过程和DataTable的应用

    存储过程p_OperatorDetails,有四个参数@sDatetime,@eDatetime,@operatorNo,@transdesc.其中@operatorNo和@transdesc为两个可 ...