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 ...
随机推荐
- Django From表单定制
参考文档: Forms The Forms API Working with forms 一.简单的Form表达定制 1)首先我们得定制Form表单类,下面我们创建一个简单的类: class Book ...
- 关于GitHub在VS中出现“已经存在master版本，无法……”的错误解决方案
引用:http://www.cnblogs.com/SmallZL/p/3637613.html(这篇已经很详细说明如何使用Vs+GitHub),我这里做补充: VS2013已经集成了Git一部分控件 ...
- ife task0003学习笔记（三）：JavaScript闭包
一.this易错分析 在学习闭包的时候,有一个概念this很重要,关于this的理解,下面3种情况:this指向谁? fn.call(obj1); obj2.fn() fn() 答案是obj1 obj ...
- mysql 索引、查询优化
查询计划Explain mysql查询过程中,如若想了解当前sql的执行计划,可以通过explain your_sql的方式查看,具体可以参考mysql官方解释:https://dev.mysql.c ...
- PHP配置错误信息回报的等级
Error_reporting:配置错误信息回报的等级 1 E_ERROR 致命的运行错误 2 E_WARNING 运行时警告( ...
- 网站部署中遇到的问题-编译器错误信息: CS0016
问题描述: 访问站点出现错误win7 x64+iis7.5 配置错误:CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\ ...
- [转]谷歌Chrome浏览器开发者工具教程—JS调试篇
来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...
- servlet中this.getServletContext(); this.getServletConfig().getServletContext(); 的区别
WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.ServletConfig对象中维护了ServletContext对象的引用,开发人 ...
- mysql四-2：多表查询
一.介绍 本节主题: 多表连接查询 复合条件连接查询 子查询 准备表: #建表 create table department( id int, name ) ); create table empl ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...