本篇文章和大家分享了Vue的简介的一些内容，有兴趣的朋友可以看一下本次学习主要来自官网的教程https://cn.vuejs.org/v2/guide一 Vue实例vue应用是由一个根Vue实例开始的。Vue会将数据绑定到data中,当data数据改变时也会导致视图的改变【观察者模式】，可以实现数据的双向绑定【响应式】。vue实例中的属性可以通过$+属性名的方式获取,入$datavue是在初始化时绑定数据的，如果初始化后再次添加元素，则不会导致视图的变化。二 Vue生...
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。一.绑定Class属性。绑定数据用v-bind:命令，简写成:语法：<div v-bind:class="{ active: isActive }"></div>。class后面的双...
一、v-bind 缩写Button Button二、v-on 缩写三、过滤器{{ message | capitalize }}四、条件渲染v-if Yes No 0.5">SorryNot sorrytemplate-v-if TitleParagraph 1Paragraph 2v-show Hello!五、列表渲染 forv-for {{ item.message }}var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]} });{{ parentMessage }} - {{ $index }} - {{ item.message }}var example2 = new Vue({el: '#ex...
表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定。 6.1 基本用法 表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。 例如下面的例子： <div id="app"><input type="text" v-model="message" pl...
本文实例讲述了Vue入门基本概念与使用。分享给大家供大家参考，具体如下： 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点:* 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目4). 与其它框架的关联:* 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术5). vue包含一系列的扩展...
今天早上来到公司，没事看了一下别人的博客，然后试了一下，发现的确是可以的，在此记录一下，方便自己日后查阅。 首先新建一个文件夹：commonFunction ,然后在里面建立 一个文件common.js建立好之后，在main.js里面引入这个公共方法最后是调用这个公共方法测试一下，我在公共方法里面写了一个简单的一段代码如下： export default{login:function(){console.log("1111");} }如何在我的login.vue里面控制台输出了：1111，那就说明了...
为什么要写本文呢，话说现在vue-ssr 官网上对 vue 服务端渲染的介绍已经很全面了，包括各种服务端渲染框架比如 Nuxt.js 、 集成 Koa 和vue-server-renderer 的 node.js 框架 egg.js，都有自己的官网和团队在维护，文档真是面面俱到功能强大，但是，我个人在刚开始看这些资料的时候，总是忍不住发起灵魂三问：“我是谁？我在哪？我在干什么？”，提前没有相关知识的人开始学这些，肯定是要走一些弯路或者卡在某个点一段时间的，所以...
vue-router是一个插件包，要先用npm进行安装 1、安装vue-router npm install vue-router yarn add vue-router2、引入注册vue-router import Vue from vue import VueRouter from vue-routerVue.use(VueRouter) 3、链接跳转 <router-link to=/home></router-link> //你可以在template中使用它实现一个可点击跳转到home.vue的 a 标签 this.$router.push(/about); //在methods方法中跳转到about页面 this.$router.go(-1); //在js中...
最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。 <script src="../xxx.js"></script> Vue 我们也可以这种引入的方式 <div id="root">{{name}}</div> <script src="./dist/vue.js"></script> <script>const vm = new Vue({el: #root,data: {name: Vue}}) </script>随着前端的发展我们出现了模块化的开发方式，例如异步（AMD）、同步（CommonJS）等等。 在我们正式开始 Vue 项目开...
v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:href 缩写为 :href; v-on 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click; <body><div id="test"><img v-bind:src="src"><a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a><a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=...
在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。简介 Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。需要它的原因在于，你的代码可能是设计在浏览器端执行的，在no...
关于SSR的文章网上很多，一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看，发现文章大多都是搬运官网的内容，真正讲的清晰明了的很少。所以想写篇文章学习下SSR，希望能够帮助大家快速理解Vue SSR。 什么是SSR？SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传给浏览器。 优点： SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜...
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <div id="app"><h1>{{ message }}</h1><button @click="clickedButton">点击偶</button> </div>let app = new Vue({el: #app,data () {return {message: Hi，大漠！}},methods: {clickedButton: function () {console.log(Hi,大漠！)}} })在Vue的模板中，我们可以...
Vue中的 computed 属性称为 计算属性 。在这一节中，我们学习Vue中的计算属性如何使用？记得在学习Vue的模板相关的知识的时候，知道在模板内可以使用表达式，而且模板内的表达式是非常的便利，但这种遍历是有一定的限制的，它们实际上是用于一些简单的运算。也就是说，如果在模板中放入太多的逻辑会让模板过重而且难以维护。咱们先来看一个示例： <div id="app"><h1>{{ message.split().reverse().join() }}</h1> </div>在这个示例...
本文介绍了vue mint-ui picker的使用，分享给大家，也给自己留个学习笔记Picker的使用import { Picker } from mint-ui; Vue.component(Picker.name, Picker);API示例一：picker的简单使用xxx.vue：<template> <div id="app"> <mt-picker :slots="slots" ></mt-picker> <router-view></router-view> </div> </template> <script> export default { data () { return { slots:[{values: [年假, 事假, 病假, 婚假, 其他]}] } }, moun...