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 ...
随机推荐
- 查询指定tomcat应用的进程数
假设应用名称为pear,查询指定tomcat应用pear的进程数: ps -ef |grep "/datong/tomcat-pear/" |grep -v tail | grep ...
- angular 兼容IE浏览器
安装classlist.babel-polyfill: npm install --save classlist.js npm install --save babel-polyfill 修改 src ...
- VHDL
数字逻辑VHDL 信号与变量 signal是全局的,在整个结构体中都有效,它的赋值是在进程结束, 也就是最后的赋值是有效的. variable是局部的,它的赋值是立即生效的. 一般变量是在进程的说明部 ...
- WCF入门教程通信（二）
一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Service,WSE,MSMQ的并集,有一副很经典的 ...
- 调用sqlserver中的存储过程
1.存储过程名 string strSQL = "usp_GetUnReturnPassports"; 2.创建数据库对象 database Database db = Datab ...
- （二） 修改IDEA自带的 maven 仓库
详细可见教程 :https://www.yiibai.com/testng/ 1.新建一个maven项目 Maven简介: Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生 ...
- Aspose.Words .NET如何实现文档合并的同页分页显示
当我们需要将一个文档添加到另一个文档时,经常会有不同的显示需求.为了文档的流畅,我们需要源文档和目标文档在内容上实现连续显示:而为了更好地区分文档,我们经常会希望两个文档的合并实现分页显示. 下面,就 ...
- vue分页
1.依赖文件 <link href="/css/index.css" rel="stylesheet" type="text/css" ...
- 【MSDN】 SqlServer DBCC解析
汇总学习下SqlServer的DBCC指令. DBCC:Transact-SQL 编程语言提供 DBCC 语句以作为 SQL Server 的数据库控制台命令. 数据库控制台命令语句可分为以下类别. ...
- fegin client使用http url合约时报： [Request processing failed; nested exception is feign.FeignException: status 400 reading
首先看feign client代码: @FeignClient(name = "SPRING-CLOUD-WEB-PROVIDER-GROUP2", url = "htt ...