vue安装：$ npm install vue vue-cil安装：$ npm install -g vue-cli 创建webpack实例：$ vue init webpack projectNametips：（摘自https://blog.csdn.net/Marian96/article/details/73603844）①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） ②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文） ③、Author (sunsanfeng)；作者（sunsanfen...
什么是 Vue.js? Vue.js 自身不是一个全能框架----它只聚焦于视图层，它是一个构建数据驱动的web 界面的库,即 Vue.js 是 MVVM 的一个库。Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定和组合的视图组件。 好，不多说，直接上代码： 双向绑定： <div id="app"><p>{{ message }}</p><!--//双向绑定，当 input 改变时 p 内也会改变 但是，当花括号里加上 * 后就变成了单向绑定{{* message }}--><input v-model=‘messag...
vue.js最强大的，应该是自动更新DOM了。只要把变量包裹在{{ }}里面，就会在处理完毕后，直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面，然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。至于绑定属性，可以:link=“varHref” :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。甚至可以@click 代替 v-on:click 。可以...
基本语法格式：<script>new Vue({ el: ‘#app‘, data: { url: ‘http://www.runoob.com‘ }})</script> 指令 【指令是带有 v- 前缀的特殊属性。】 判断 <p v-if="seen">现在你看到我了</p> 参数 <a v-bind:href="url">菜鸟教程</a> 监听 v-on 指令，它用于监听 DOM 事件： <a v-on:click="doSomething"> 过滤器：{{ message | capitalize }} 或 <div v-bind:id="rawId | formatId"></div> ...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/dist/vue.js"></script><script> //父亲调用子组件的方法，子组件暴露一些方法让父组件调用 // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例 let vm=new Vue({ el:"#app", template:‘<child ref="c"></child>‘,...
最近在某个项目中用到了Vue.js,从上手做开发到项目发布，一步步踩了不少坑。本文试图总结过去一个多月使用Vue.js中的一些经验，也算是一点心得体会吧，拿出来与大家分享，欢迎多多交流。Vue.js简介Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.这是来自Vue.js官网的...
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看<template><section><div ref="hello"><h1...
<!DOCTYPE HTML><html><head><title>vue.js 处理用户输入</title><script src="../vue.js"></script></head><body><div id="app"><input v-model="newTodo" v-on:keyup.enter="addTodo"/><ul><li v-for="todo in todos"><span>{{todo.text}}</span><button v-on:click="removeTodo($index)">X</button></li></ul></div><script>new Vue({el:"#app",data:{newTodo:"",todos:[{text:‘add some todos‘}]},methods:{addTodo:functio...
//list例子:绑定从localStorage中读取的数据，动态添加list并监听将数据变化存储在localStorage中，绑定点击事件改变样式，页面 data数据： input_name:‘‘, items:locaStorage_work.fetch(),locaStorage_work为引用的组件js主要方法 监听存数据取数据：样式：.class-b{ text-align:center;}.class-a{ color:red;} 原文：http://www.cnblogs.com/wpsyp/p/6186434.html
1.Vue的介绍Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.Vue的安装方式1.独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。BootCDN（国内...
一、环境node.js下载安装后$ node -v v12.14.1$ npm -v 6.13.4//安装cnpm 使用淘宝镜像 npm install -g cnpm --registery=https://registry.npm.taobao.org二、使用方式2.1 多页面引入vue使用官网cdn vue.jshttps://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5npm安装vue,使用本地vue.jscnpm install vue --save 2.2 vue-cli构建spa应用cnpm i -g vue-cli//构建简单 或者 完整demo实例 vue init webpack-simple demo 或 vue init w...
<mt-popup v-model="popupVisible" popup-transition="popup-fade" style="max-height: 80%!important;overflow: auto"><mt-radio v-model="model" :options="options" @change=onChange></mt-radio> </mt-popup> style中的内容，可以根据需求调整所需高度 动态添加高度吧算 <div class="bgsyj" :style="{‘height‘:( (comments.length + 1) * 60 +200)+‘px‘}">原文：https://www.cnblogs.com/BKhp/p/12197880.html
主体 实例方法归类: data 数据方法 dom dom方法 event 事件处理 lifecycl 生命周期函数 init 初始化vue页面 全局方法: derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ]重点: 把数据(Model) 和视图(View) 建立关联1. 通过observer 对 data 监听, 包括监听...
Vue.js 计算属性使用计算属性的实例：<!DOCTYPE html> <html><head><meta cahrset="utf-8"><title>computed</title><script src="vue.min.js"></script></head><body><div ><p>原始字符串：{{message}}</p><p>反转后字符串{{reversedMessage}}</p></div><script>var vm = new Vue({el: ‘#app‘,data: {message: ‘Runoob‘},computed: {// 计算属性的 getterreversedMessage :function(){// `this` 指向 vm 实例return this.messa...
一、组件间的通信 组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。如下图所示：二、 Prop — 父组件传递数据给子组件 ...