实例解析Vue.js下载方式及基本概念

vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

说明及下载

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

script type="text/javascript" src="js/vue.min.js"></script>

Vue代码实例（创建）

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

Vue实例代码（方法）

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</div>

Vus.js模板语法

模板语法指的是如何将数据放入html中

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如：

{{ msg }}

插入的值当中还可以写表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

指令

指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Vue.js 特点

  • 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
  • 数据驱动： 自动追踪依赖的模板表达式和计算属性。
  • 组件化： 用解耦、可复用的组件来构造界面。
  • 轻量： ~24kb min+gzip，无依赖。
  • 快速： 精确有效的异步批量 DOM 更新。
  • 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

总结

以上所述是小编给大家介绍的Vue.js下载方式及基本概念，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue.js 使用axios实现下载功能的示例

    本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(frame.a)和POST(form)请求具有如下特点: response会交由浏览器处理 response内容可以为二进制文件.字符串等 Ajax请求具有如下特点: response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能. Axi

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例 源码 <!DOCTYPE html> <html lang="en"> <head&g

  • 实例解析Vue.js下载方式及基本概念

    vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 说明及下载 Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/ vue.js如果当成一个库来使用,可以通过下面地址下载: https://cn.vuejs.org/v2/guide/installation.html Vue.js基本概念 我们下载了vue.js后,需要在页面上通过script标签引入vue.j

  • 解析vue.js中常用v-指令

    目录 Vue中 v-text on if for model bind show 的解释 v-text v-html: v-on v-if v-for v-model v-bind v-show v-bind与v-model的区别 Vue中 v-text on if for model bind show 的解释 v-text v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少 注意: v-text 只能用在双标签中 v-html: 元素的innerHT

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • 实例讲解Vue.js中router传参

    实例讲解Vue.js中router传参

    Vue-router参数传递 为什么要在router中传递参数 设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息.那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息. vue-router 参数传递的方式 Parma传参 贴代码: /router/index.vue export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • vue.js响应式原理解析与实现

    从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo. 首先,先让我们来了解一些基础知识. 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定gette

  • Vue.js+Layer表格数据绑定与实现更新的实例

    一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 <div id="content"> <table class="mytable"> <tr class="header"> <td>选择</td> <td>用户名</td> <td>学号</td>

  • vue.js 嵌套循环、if判断、动态删除的实例

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API app.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs 嵌套循环.if判断 </title> <

  • vue.js指令和组件详细介绍及实例

    vue.js指令和组件详细介绍及实例

    大家好,本文给各位做一下vue.js一个最基本的概念介绍. vue.js 指令 <div id="app"> <div v-text="message"></div> </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 这个例子我们会得到,v-text所在的div元素的内部插入了'Hello Vue!'这段字符串,那么我们为

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

随机推荐