vue扩展插件(1) vue-cli 脚手架(2) vue-resource(axios) : ajax请求(3) vue-router 路由(4) vuex 状态管理(5) vue-lazyload 图片懒加载(6) vue-scroller 页面光滑动相关(7) mint-ui : 基于vue的ui组件库(移动端)(8) element-ui : 基于vue的ui组件库(pc端) <div id="test"><input type="text" v-model="msg"><p>Hello {{msg}}</p>
</div>
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script>var v = new V...
Vue.js可以灵活的控制样式我们首先随便写2个样式<style>.divCss {background-color: green;width:400px;height:400px;}.fontCss {font-size: large;color:red;}</style>直接在元素中class="divCss"这样,是老办法了,在Vue中,可以更加灵活<div id="appDiv" v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div中的文字</div><script>var v = new Vue({el: ‘#appDiv‘,data: {divFlag: true,fontFlag: false},methods: {}...
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...
1、插槽(1)插槽内容像 HTML 元素一样,我们常常需要给组件传递内容比如在下面的例子中,我们给自定义组件 prompt-info 传入 出错啦 的文本<!DOCTYPE html>
<html><head><title>Demo</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head><body><div id="app"><prompt-info>出错啦</prompt-info></div><script>Vue.component('prompt-info', {template: `<div><h3>提示信息</h3></div>`})new Vue({el: '#app'...
vue.js最强大的,应该是自动更新DOM了。只要把变量包裹在{{ }}里面,就会在处理完毕后,直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面,然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。至于绑定属性,可以:link=“varHref” :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。甚至可以@click 代替 v-on:click 。可以...
{{xxx}} 基本的插值表达式插值表达式 使用两个大括号 {{ data中定义的数据名 }}
可以将数据插入到指定的位置这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以使用methods中定义的函数等等其他数据渲染指令v-text:指定元素的内容(纯文本)v-html:指定元素的内容(解析html)v-pre:用于跳过这个元素和它的子元素的编译过程,用于显示原本的Mustache语法({{xxx}})v-once:只进行一次渲染,不进行响应式,...
1.Vue的介绍Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.Vue的安装方式1.独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。BootCDN(国内...
1、启动页面:index.html<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hcmanage</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>其中 <div id="app"></div> 是用于挂载页面的2、启动js: main.jsimport Vue from‘vue‘//引入vue.js
import App from‘./App‘//引入App.vue
import route...
接着前面的内容:https://www.cnblogs.com/yanggb/p/12584237.html。事件处理使用javascript当然少不了事件处理,即使是vue也不会例外。监听事件在vue中可以使用【v-on】指令监听dom事件,并在触发的时候运行一些javascript代码。<div id="example-1"><button v-on:click="counter += 1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div>var example1 = new Vue({el: ‘#example-1‘,data: {co...
一、起步1.安装npm install vue-router2.使用main.jsimport Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘new Vue({router,render: h => h(App)
}).$mount(‘#app‘)router.jsimport Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘./views/Home.vue‘Vue.use(Router)export defaultnew Router({routes: [{path: ‘/‘,name: ‘home‘,component: Home},{path: ‘/ab...
主体 实例方法归类: 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 监听, 包括监听...
propsData 不是和属性有关,他用在全局扩展时进行传递数据。先写一个全局扩展var header_a = Vue.extend({ template:`{{message}} 传值 {{ a }}`, data:function(){ return { message:"内容" } }, props:[‘a‘]}) 挂载 new header_a().$mount(‘header‘) 这时如果想传递值。就要用propsData1.在全局扩展里加入props进行接收。 new header_a(propsData:{a:1}).$mount(‘header‘)...
<div v-laohan="font">元素</div>需要在构造器外执行Vue.directive(‘my‘,function(el,binding,vnode){console.log(el) //<div>元素</div>console.log(binding) //objectconsole.log(binding.name) //laohanconsole.log(binding.expression) //fontconsole.log(binding.value) //red el.style="color:"+binding.value }) data:{font:‘red‘} 自定义指令有五个生命周期(也叫钩子函数)bind inserted update componentUpdated ...
v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<p v-if="greeting">Hello</p>
</div><script src="js/vue.js"></script>
<script>
var vm2 = new Vue({
el:‘#exa...
1、vue.js的目的Vue的产生主要是解决三个问题1.1、主要解决的是数据绑定的问题1.2、主要是构建大型的单页面程序,解决app页面卡顿的问题1.3、支持组件式开发,采用积木式编程2、Vue.js的特性 1、mvvm模式2、组建化3、指令系统4、vue.js开始支持虚拟dom 虚拟dom可以提升页面的刷新速度 原文:http://www.cnblogs.com/bjjjunjie/p/7106579.html