vue,js基础知识

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中,最好也要定义这个属性,不然会报错。

转自:http://www.cnblogs.com/yueyue-love/p/6215711.html;

时间: 2024-08-06 12:30:00

vue,js基础知识的相关文章

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <

vue.js基础知识篇(8):与服务端通信

vue.js可以构建一个完全不依赖后端服务的应用APP,同时也可以与服务端进行数据交互来同步界面的动态更新.vue-resource实现了基于AJAX.JSONP等技术的服务端通信. 第十三章:与服务端通信 1.安装和配置vue-resource 安装方法:使用script标签引入. (1)参数配置.分为全局配置.组件实例配置和调用配置3部分,其优先级依次增高. 第一,全局配置. (2)headers配置 XXX 2.基本HTTP调用 (1)底层方法 (2)便捷方法 (3)请求选项对象 (4)r

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别 相同

简单易懂的 Vue.js 基础知识 !

根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <!-- 这是我们的 View --> <div id="app"> Hello {{ name }}! </div> // 这是我们的 Model var model = { name: 'Vue.js' } // 创建一个 Vue 实例或 "viewModel" //

vue.js基础知识总结

初始化一个项目 npm init -y 安装一些依赖 npm install 名称 --save 例如 npm install vue axios bootstrap --save --save 表示开发和上线都要用 --save dev 表示开始时候用,上线丢掉 vue总结 1.指令 v-show 切换显示隐藏,频繁显示使用 v-if 根据条件语句可以显示隐藏,不频繁显示隐藏使用 v-else 前面有v-if 配合使用,如果前面v-if不成立情况下 v-model 双向数据绑定的关键所在,视图