一个构建用户界面的框架通过指令，来给DOM元素赋值或者其他操作。简单的指令及其作用：在HTML标签中显示数据： --> {{}} --> v-text --> v-html 这三条指令都是给HTML具体标签填充内容，可以是文本，也可以是其他标签 ------------------- --> v-if --> v-else 这两条命令配合使用，如果变量为true，则插入if所在的标签，否则就插入else所在的标签。 ------------------- --> v-show 如果变量为t...
参考网站官网：https://cn.vuejs.org/Vue介绍Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。Vue优点1、体积小：压缩后的体积就几十K。2、运行效率高：操作基于虚拟dom。3、数据的双向绑定：更多的精力放在业务层。4、生态丰富，学习成本低：市场上有很多基于Vue框架的UI框架。原文：https://www.cnblogs.c...
1.数据的双向绑定 1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 </head>7 <body>8 <div id="app">910 <label for="username">用户名：</label>
11 <input type="text" id="username" v-model="msg">
12 <p>{{ msg }}</p>
13 <textarea name="" id="" v-model="msg"></textarea>
1415 <input type="checkbox" id="checked" v-model="checked">
16 ...
<!DOCTYPE html>
<html>
<head><title>vue</title><!-- <script src="./vue.js"></script> --><script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body><div >{{msg}} {{num}}<div v-html="wocao"></div><div v-text="wocao"></div><div v-on:click="handleClick">{{content}}</div><div v-bind:title="title">title</div><input type="text" :value="neirong"> <!-- v-bind:可简写为: -->...
vuejs项目不支持IE8及以下版本一、项目搭建cnpm install --global vue-clivue init webpack my-projectcd my-project cnpm installnpm run dev二、vuejs过渡1）css过渡 <transition name="xxx"> //xxx过渡组件的名字 <p v-if="show">hello</p> //要过渡的组件或者元素，包裹在transition标签里</transition>.xxx-enter-active,.xxx-leave-active{transition: opacity 0.5s}.xxx-enter,.xxx-leave-to{opacity: 0} 2）css动画<d...
npm install -g vue //全局安装vue
npm install -g webpack //全局安装webpack
npm install -g vue-cli //全局安装vue-cli
//可用淘宝镜像 npm=》cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org生成项目vue init webpack my-first-vue-project //生成项目名为my-first-vue-project的模板了解vue与webpack的关系 学习vue装好项目后cd my-first-vue-project //进入目录npm install //下载所需要...
转载地址：http://www.jianshu.com/p/ee7ff3d1d93drouter.push(location)除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location)想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <rout...
基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库，即可搭建完成一个新项目的基础模板，源码地址，欢迎 star 或 fork特性CSS 预编译语言：lessAjax: axios，做了一定的封装，详见 src/services/request.jsSVG 雪碧图：采用 webpack 插件 svg-sprite-loader,及 svg 精简压缩工具 svgo移动 web 的适配方案：引入了 postcss-pxtorem 及 lib-flexible，可以自由地用 px 去开发常用的 js 工具类： cloud-utils常用的 Less 的 mixins...
目录表单指令条件指令循环指令分隔符（了解）过滤器计算属性监听属性冒泡排序表单指令使用方法：v-model文本框<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">v1:'123' 先定义一个默认值会将两个框中的数据进行联动，一个框中的值会随着两外一个框中的值的变化而变化单选框<p>男：<input type="radio" name="sex" value="male" v-model="v2">...
1. vue的基本数据显示<body><div id="testvue">{{msg}}</div><script type="text/javascript">//声明一个全局变量vue,通过new关键字获得一个‘应用对象(vueObject)‘var vueObject =new Vue({el:"#testvue",//element:利用id选择器的方式选择上面的div data:{//用于保存数据,在data中注册一些变量,并且为变量赋值。 msg:"你好"}})//使用watch关键字进行监控,其中msg为监控的对象,newVal为修改后的新值,oldVal为修...
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。vue中的重要特性一、vue中的自定义组件html的代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue1</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="app"><my-component my-...
1、环境配置安装VsCode安装包管理工具：直接下载 NodeJS 进行安装即可，NodeJS自带 Npm 包管理工具，下载地址：https://nodejs.org/en/download/
安装完成后在命令行执行以下命令查看npm包管理器版本npm -v
npm中文文档：https://www.npmjs.cn/配置淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao.org然后执行 cnpm -v 查看版本信息E:\视频\VUE>cnpm -v
cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\...
模版语法Vue 使用基于 HTML 的方式来声明页面的样式，同时可以把我们在 Vue 中声明的数据 data 动态的展示在界面中，这就是模版语法。差值文本数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值。HTML 特性不能用 Mustache 语法，应该使用 v-bind 指令。{{}} v-bind: v-once v-text v-html
列表渲染v-for条件渲染v-if v-else v-else-if v-show
表单输入绑定你可以用 v-model 指令在表单 、 及 元素上创建双...
官方文档1. 基本例子html<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-...
------------恢复内容开始------------1、Vue的简单模板<div id="app"><h1>{{ msg }}</h1></div><script>//2.创建一个vue实例对象 const MyVue =new Vue({//3.告诉vue对象需要控制的界面上的区域 el: "#app",//4.告诉vue实例对象，控制区域内的数据 data: {msg: "vue的实例模板"}})
</script>2、Mustache语法<body><div id="app"><h1>{{ msg }}</h1><h1>{{ msg }}，mustache语法</h1><!-- mustache语法中不仅仅能直接写变...
