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 ...
随机推荐
- merchantInfo.properties配置文件
p1_MerId=10001126856 keyValue=69cl522AV6q613Ii4W6u8K6XuW8vM1N6bFgyv769220IuYe9u37N4y7rI4Pl callback= ...
- URAL 1252 ——Sorting the Tombstones——————【gcd的应用】
Sorting the Tombstones Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I ...
- html 跨过CSRF验证
/* CSRF配置 */function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection r ...
- Observer(观察者)设计模式[转]
Observer设计模式中主要包括如下两类对象: Subject:监视对象,它往往包含着其他对象所感兴趣的内容.在本范例中,热水器就是一个监视对象,它包含的其他对象所感兴趣的内容,就是tempratu ...
- Razor语句（VIew）小知识
1.可以写后台语句 例如:
- C# 判断List集合中是否有重复的项
/*在.Net 3.5 以上*/ ).Count() >= ;
- OpenLayers 3 给features 添加手势
map.on('pointermove',function(e){ var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasF ...
- 3、HTML属性
属性的意义是为HTML提供附加信息. 属性中,名称和值总是成对出现.比如 <img src="1" width="2" /> src="1 ...
- git如何进行远程分支切换
git如何进行远程分支切换 git上查看远程分支命令: git branch -a 例如: 然后我想切换到daily/1.0.0远程分支:前提是必须要创建一个本地分支,并让它和远程分支进行关联,gi ...
- 标头停止点不能位于宏或#if块中.
使用VS2010在项目中编写C++头文件**.h时提示: PCH 警告: 标头停止点不能位于宏或#if块中 原因:vs2010的智能感知要求.h必须以非#if系列的预编译指令打头 正确方法:将所有含有 ...