vue快速使用
1、引用脚本
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
vm.＄data === data // => true
vm.＄el === document.getElementById('example') // => true 实例：使用srcipt做法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example-1">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<input v-model="inpu"/>
<span>{{revMsg}}</span>
<button type="button" onclick="destroy()">销毁</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [{
message: 'Foo'
},
{
message: 'Bar'
}
],
inpu:0
},
//创建前
beforeCreate:function(){
console.log("创建前进入beforeCreate inpu："+this.inpu+" $el："+this.$el);
},
//创建后
created:function(){
console.log("创建后进入created inpu："+this.inpu+" $el："+this.$el);
//this.add();
},
//挂载前
beforeMount:function(){
console.log("挂载前进入beforeMount inpu："+this.inpu+" $el："+this.$el);
},
//挂载后
mounted:function(){
console.log("挂载后进入mounted inpu："+this.inpu+" $el："+this.$el);
},
//实例更新前
beforeUpdate:function(){
console.log("实例更新前进入beforeUpdate inpu："+this.inpu+" $el："+this.$el);
},
//实例更新后
updated:function(){
console.log("实例更新后进入updated inpu："+this.inpu+" $el："+this.$el);
},
//实例销毁前
beforeDestroy:function(){
console.log("实例销毁前进入updated inpu："+this.inpu+" $el："+this.$el); },
//实例销毁后
destroyed:function(){
console.log("实例销毁后进入updated inpu："+this.inpu+" $el："+this.$el);
},
//定义方法
methods: {
//调用时候进入
add(){
console.log("进入add");
for(var i = 0;i<2;i++){
this.items.push({
"message": i
})
}
}
},
computed: {
//加载时候进入 在created后面 修改时候在computed后面 在updated前面
revMsg: function() {
console.log("进入computed revMsg inpu："+this.inpu+" $el："+this.$el); },
ss:function(){
console.log("进入computed ss inpu："+this.inpu+" $el："+this.$el);
}
},
watch:{
//值更变时候进入 修改是在 computed前面
inpu: function(val, oldVal) {
console.log("新值:"+val+" 旧值："+oldVal);
}
}
}) function destroy(){
example1.$destroy();
}
</script>
</html>
生命周期详细：https://www.cnblogs.com/weibanggang/p/9999055.html
运行结果：
使用export方法
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul id="example-1">
<li v-for="item in datas" :key="item.message" >
{{ item.message }}
</li>
</ul>
</div>
</template> <script>
export default {
name: 'HelloWorld',
props: {
msg: ""
},
data() {
return {
datas: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
} },methods:{
adds(){
for (var i = 0; i < 10; i++) {
this.datas.push({"message":i});
}
}
},
created() {
this.adds();
}
} /* var xx = {
name: 'HelloWorld',
props: {
msg: ""
},
data() {
return {
datas: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
}
},
methods:{
adds(){
for (var i = 0; i < 20; i++) {
this.datas.push({"message":i});
}
}
},
created(){
this.adds();
}
}
export default xx; */
运行结果
案列下载地址：https://github.com/weibanggang/vueexport.git
vue快速使用的更多相关文章
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- vue 快速入门 系列
vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用（下）
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
随机推荐
- (转)Saltstack系列
Saltstack系列1:安装配置 Saltstack系列2:Saltstack远程执行命令 Saltstack系列3:Saltstack常用模块及API Saltstack系列4:Saltstack ...
- Beam概念学习系列之Pipeline Runners
不多说,直接上干货! https://beam.apache.org/get-started/beam-overview/ 在 Beam 管道上运行引擎会根据你选择的分布式处理引擎,其中兼容的 API ...
- Best HTTP
http://blog.csdn.net/u012322710/article/details/52860747 Best HTTP (Pro) 这是一款很多公司都在用的网页插件,感觉确实不错,分P ...
- C# 面试题 （四）
1, 请你说说.NET中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多. 结构不能申明有默认的构造函数,为结构的副本是又编译器创建和销毁的,所以不需要默认的构造函数和析构函数 ...
- 跨页面传值2之cookie多值使用
单值cookie结构 CookieKeyName——CookieValue CookieKeyName2——CookieValue2 ............... 通过CookieKeyName进行 ...
- JavaScript对象 继承
JavaScript继承主要依靠原型链实现. 原型链 利用原型让一个引用类型继承另一个引用类型水位属性和方法. 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指 ...
- [转]MySQL索引类型
此为转载文章,仅做记录使用,方便日后查看,原文链接:https://www.cnblogs.com/luyucheng/p/6289714.html MySQL索引类型 一.简介 MySQL目前主 ...
- OpenStack各组件详解和通信流程
一.openstack由来 openstack最早由美国国家航空航天局NASA研发的Nova和Rackspace研发的swift组成.后来以apache许可证授权,旨在为公共及私有云平台建设.open ...
- Disruptor之粗糙认识
一 概述 1.Disruptor Disruptor是一个高性能的异步处理框架,一个“生产者-消费者”模型. 2.RingBuffer RingBuffer是一种环形数据结构,包含一个指向下一个槽点的 ...
- 慧都启动“正版IDE联合超值推广计划
越来越多的中国软件企业为盗版所害而蒙受巨大损失,正版化意识逐渐兴起.IDE(集成开发环境)是软件开发.编写代码必备工具,而正版IDE更具有运行更稳定.编码更安全.保障更加完善等特点,逾为中国软件行业企 ...