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快速使用的更多相关文章

  1. vue 快速入门 系列 —— 虚拟 DOM

    其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...

  2. vue 快速入门 系列

    vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...

  3. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  4. vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...

  5. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  6. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  7. vue 快速入门 系列 —— vue 的基础应用(下)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  8. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  9. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  10. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

随机推荐

  1. (转)网站速度优化技巧:Nginx设置js、css过期时间

    网站速度优化技巧:Nginx设置js.css过期时间 原文:http://www.webkaka.com/blog/archives/Nginx-set-the-expiration-time-for ...

  2. 深入理解JavaScript系列(2):揭秘命名函数表达式

    前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表 ...

  3. could not find an installed version of gradle either in android studio

    问题描述: 很多人在Ionic升级到3之后,无缘无故发现,当我们添加android平台后,build或者run的时候,命令行窗口给我们提示: 如果在Ionic2时add的android platfor ...

  4. ThreadPoolExecutor(下篇)

    上篇写到了ThreadPoolExecutor构造方法前4个参数int corePoolSize.int maximumPoolSize,.long keepAliveTime.TimeUnit un ...

  5. 从零开始编译属于你的FFmpeg

    一.前提: 编译FFmpeg可以是初学者,尤其是对C语言项目,Linux编译不熟悉的的初学者的一道门槛. 我曾经找过很多博客,文章,有些能编译成功,有些则不能.编译通过,能够运行也是云里雾里的.其实最 ...

  6. ${pageContext.request.contextPath}是JSP取得绝对路径(转载)

    ${pageContext.request.contextPath}是JSP取得绝对路径的方法,等价于<%=request.getContextPath()%> . 也就是取出部署的应用程 ...

  7. SQL Server2008宝典 全书代码

    -- ============================================= -- Create database template -- ==================== ...

  8. ArcGIS Geodabase OBJECTID重新初始编号的间接方法

    ArcGIS Geodabase OBJECTID为Long型,随着Feature的增加和删除自动编号,均为增加.即删除Feature后,再增加该号码自动只增加不重新编号. 间接方法可以实现重新从1编 ...

  9. Strom入门

    Worker.Executor.Task详解: Storm在集群上运行一个Topology时,主要通过以下3个实体来完成Topology的执行工作:1. Worker Process(工作进程)——S ...

  10. OLAP和数据挖掘的区别

    总结来说: 数据仓库提供了一个分析的数据源 数据挖掘能分析出未知的信息,提出假设 OLAP能通过分析,验证假设 从技术角度看,商务智能的过程是企业的决策人员以企业中的数据仓库为基础,经由数据挖掘工具. ...