一份不错的vue.js基础笔记!!!!

第一章 Vue.js是什么?

Vue(法语)同view(英语)

Vue.js是一套构建用户界面(view)的MVVM框架。Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合。

1.1 Vue.js的目的

Vue.js的产生核心是为了解决如下三个问题:

  1. 解决数据绑定的问题;
  2. Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application)

Angular.js中对PC端支持的比较良好,但是对移动端支持就一般。而Vue.js主要支持移动端,也支持PC端。

3. 它还支持组件化。也就是可以将页面封装成若干个组件,采用积木式编程 ,这样是页面的复用度达到最高(支持组件化)。

1.2 Vue.js特性

  1. MVVM模式

M: model  业务模型,用处:处理数据,提供数据

V: view    用户界面、用户视图

业务模型model中的数据发生改变的时候,用户视图view也随之变化。用户视图view改变的时候,业务模型model中的数据也可以发生改变。

  1. 组件化
  2. 指令系统
  3. Vue.js 2.0开始支持虚拟DOM(Vue.js 1.0 是操作的真是DOM,而不是虚拟DOM)

虚拟DOM可以提升页面的刷新速度。

第二章 Vue.js入门

使用Vue.js的步骤:

第一步:在html页面中引入vue.js

第二步:Vue.js提供了一个Vue,我们需要创建一个对象。

new Vue({});

第三步:在用户界面view中,通过{{}}形式将data中的数据显示在页面中。

在用户界面中,{{}}代码中绑定的data的key,而在页面中显示的是该key的value。

Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。

app这个变量会代理vue中data数据。所以我们访问data中数据的时候,直接用app.name就可以了

这样,如果我们要实现前后台交互,只要将从后台得到的数据,放在data中,页面就会自动绑定,这样就实现了从model->view的数据流向。

第三章 Vue.js指令

指令,其实指的就是vue的v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能。

指令的语法:

v-指令名称=”表达式判断或者是业务模型中属性名或者是事件名”

3.1 v-text

作用:操作元素中的纯文本

快捷方式:{{}}

3.2 v-html

作用:操作元素中的html

3.3 v-bind

作用:v-bind绑定页面中的元素属性。例如:a的href属性,img的src、alt和title属性。

语法:v-bind:元素的属性名 = “data中键名”

在view模板中,可以使用简单的JS表单式,例如:

3.4 v-show

作用:通过判断,是否显示该内容。如果值为true,则显示。否则就隐藏。

语法:v-show=”判断表达式”

特点:元素会始终渲染在DOM中,只是被设置了display:none

3.5 v-if

作用:判断是否加载固定的内容。如果为真,则加载;为假时,则不加载。

用处:用在权限管理,页面条件加载

语法:v-if=”判断表达式”

特点:控制元素插进来或者删除,而不是隐藏。

v-if与v-show的区别:

一般来说,v-if有更高的切换消耗,安全性更高,而v-show有更多的初始化渲染消耗。因此,如果需要频繁切换而对安全性无要求,使用v-show。如果在运行时,条件不可能改变,则使用v-if较好。

3.6 v-else

v-else必须紧跟在v-if后面,否则他不能被识别。表示:当v-if的条件不成立的时候执行。

3.7 v-for

作用:控制html元素中的循环,实现诗句列表的生成。

用法:

view:

v-for=”item in 集合”

item: 集合的子项

集合:被遍历的集合,通常为数组。

用处:写在谁上,谁循环。

数据:

3.8 v-on

作用:对页面中的事件进行绑定

语法: v-on:事件类型=“事件处理函数名”

缩写: @事件类型=“事件处理函数名”

用法:

在view中,用v-on:事件类型=”methods中的方法名字”

在vue实例中,在methods中去监听:也就书写methods的该方法。

3.9 v-model

作用:接受用户输入的一些数据,直接就可以将这些数据挂在到data属性上。这样就产生了双向的数据绑定(当业务模型中的数据发生变化时,用户界面中的数据会发生变化;当用户界面中的数据变化时,业务模型中的数据也会发生变化)。

语法:v-model = “data中的键名”

在data中,最好也要定义这个属性,不然会报错。

时间: 2024-10-14 16:42:39

一份不错的vue.js基础笔记!!!!的相关文章

原声js基础笔记

原声js基础笔记 前端开发群: 欢迎加入. <!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

Vue.js 基础部分

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.6 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

vue.js随笔记---初识Vue.js

1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他强调了recat组件化的概念,可以轻松实现数据和展现的分离,吸收了angular灵活的指令和页面操作的一些方法,但是相对于这两者,更简单易学,容易上手. 3.10s看懂vue.js A: <div id="demo"> <p>{{msg}}</p> &l

vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想

一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 (二):数据响应原理 (三):组件化 (四)组件设计原则 1:页面上每个独立的可视/可交互区域视为一个组件 2:每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护 3:页面只不过是组件的容器,组件可以嵌套自由组合形成完整的页面

Vue.js学习笔记

绑定一个元素 双向绑定 渲染列表 处理用户输入 综合 相应数据的绑定 组件系统 构造器 实例的生命周期 数据绑定语法 插入数据值 绑定表达式 指令 计算属性 绑定Class和CSS 绑定HTML class 绑定内联样式CSS 绑定一个元素 <!-- 如果new Vue不写在$(document).ready(function() {}里面的话,就必须写在最后面,这样才能保证页面元素是先于js加载的. --> <script> $(document).ready(function(