vue基础入门
<body>
<!-- 在angularJS中用ng-model -->
<!-- {{mseeage?message:11}}支持三元表达式 -->
<!--{{*}} 可以 只绑定一次 视图变化时不进行改变 -->
<!--{{{}}} 绑定html标签 识别html标签 -->
<div class="app">
<input type="text" v-model='message'>
<!-- {{message}} -->
<!-- <br> {{message?message:1}} -->
<br> {{*message}} {{{message}}} </div>
</body>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({ //实例 MVVM
el: ".app",
data: {
// message: "333"
message: "<h1>hello</h1>"
}
})
</script>
<body>
<div id="app">{{message.age}}</div>
<script src="vue1.0.28.js"></script>
<script>
var mess = {
age: 18
}
var vm = new Vue({
el: "#app",
data: {
message: mess
}
})
// vm.message.age = 100;
//我们当前实例vm和mess这个对象指向的是同一内存空间
//在实例创建后挂载以前不存在的属性是不会刷新视图的
console.log(vm.message == mess)
</script>
</body>
<body>
<div id="app">
{{message}}
<input type="text" v-model='message'><br> {{age}}
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "aaaa"
}
})
//vm.$el 不能更改绑定数据的元素
console.log(vm.$el == document.getElementById("app")) //vm.$data 就是data对应的这个对象
console.log(vm.$data);
// vm.$data = { age: 200 } //可以直接更改对象指定
// console.log(vm.$data);
//vm.$watch 监听数据变化
vm.$watch('message', function(newValu, oldVlue) {
console.log(newValu, oldVlue)
})
</script>
</body>
构建 new Vue（）实例
观察数据 （observe Data）
初始化方法 （Init Events）
没有问题，开始创建，调用 created 方法
没发现有el元素，看是否有vm.$mount（el）方法 （这个方法的作用是就是告诉我们初始化开始，可以挂载数据了）
发现el元素，看是否有模版，开始编译模版
若有模版就替换，若没有模版就直接插进去
编译完成
插入文档中，然后调用ready（）方法
调用vm.$destroy（）就销毁了
先进行销毁，然后把事件、属性、子组件 去掉
最后销毁掉，完全死亡
<body>
<div id="app">{{message}}</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
data: {
message: "sss"
},
created() {
alert("1:创建实例")
},
beforeCompile() {
alert("2:编译前")
},
compiled() {
alert("3:编译完成")
},
ready() {
alert("4:准备好了")
},
beforeDestroy() {
alert("5:销毁前")
},
destroyed() {
alert("6:销毁了")
}
})
//手动挂载 el
vm.$mount("#app");
//销毁需要调用$destroy
vm.$destroy();
</script>
</body>
<body>
<div id="app">
{{pages}}
<input type="text" v-model="page">
</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
page: 1,
num: 2
},
computed: {
pages: function() { //默认的方法是获取
//在vm中所有的this指向的都是当前实例
return this.page * this.num
}
}
})
</script>
</body>
computed 的 set get 方法
<body>
<div id="app">
{{pages}}
<input type="text" v-model="num">
</div>
<script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
page: 1,
num: 2
},
computed: {
pages: {
get() { //默认的方法是获取
//在vm中所有的this指向的都是当前实例
return this.page * this.num
},
set(val) {
//在设置方法去更改data中数据
this.num = val;
}
}
}
}) vm.pages = 9;
</script>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head> <body>
<div id="app">
{{message}}
<!-- 在ng中 ng-bind可以解决单个标签闪烁问题 -->
<!-- v-text 只能解决单个闪烁问题 -->
<!-- 在ng中 ng-cloak 可以解决多级数据闪烁问题 -->
<!-- v-cloak 可以解决多级数据闪烁问题 -->
<div v-text="message"></div>
<div v-cloak>
{{message}}
</div>
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "涉及到极点拉萨警方立即as啊打算减肥阿道夫啊"
}
})
</script>
</body>
<body>
<div id="app">
<div v-if="false">
我是内容
</div>
<div v-show="false">
我是内容
</div> <!-- template标签是不会被渲染的 解决无意义的空标签问题 template一般配合v-else使用 -->
<!-- 在 v-show上不支持template语法 -->
<template v-if="true">
<div>1</div>
<div>2</div>
</template> <!-- v-else要跟在v-if后面，也可以跟在v-show后面 -->
<div v-else>
如果template中 v-if的条件不成立 就显示 v-else
</div>
</div> <script src="vue1.0.28.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "涉及到极点拉萨警方立即as啊打算减肥阿道夫啊"
}
})
// v-show/v-if的区别
//v-show => ng-show 操作的是样式 （display:none） （一般作用于样式切换）
//v-if => ng-if 操作的是DOM （如果条件不成立 就移除dom了) （一开始知道存在与否，不会去切换的时候用）
//区别：v-if有更高的切换消耗 而v-show有更高的初始渲染消耗
</script>
</body>
<body>
<!-- 在angularjs中，用ng-repeat vue中用 v-for -->
<div id="app">
<template v-for=" (key,m) in datas">
{{$index}}-{{key}}:{{$key}},{{m}}<br/>
</template>
<!-- $index 表示当前第几个 （在vue中 $odd $even $fist $last 都没有 -->
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
datas:{
name:"test",
age:"12"
}
}
})
</script>
</body>
<body>
<div id="app">
<!-- track-by 强制通过索引去遍历 -->
<!-- 如果在数组中取到的值为相同的值 那么需要用到track-by 防止报黄报错 -->
<ul v-for="(key,m) in datas" track-by="$index">
<li>{{key}}：{{$index}}-{{m.name}}:{{m.price}}</li>
<!-- 没有$key -->
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
datas:[
{name:"苹果",price:"90"},
{name:"香蕉",price:"91"},
{name:"橘子",price:"92"}
]
}
})
</script>
</body>
<body>
<div id="app">
<div v-for="(key,mess) in datas">
<div>{{$index}}:
{{mess.name}}:{{mess.price}}
<div v-for="mess2 in mess.type">
<!-- 在父级写上索引 儿子可以拿到父亲的索引值 -->
{{key}}:{{mess2}}
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
datas:[
{name:"苹果",price:"90",type:["red","blue"]},
{name:"香蕉",price:"91",type:["black"]},
{name:"橘子",price:"92",type:["pink"]}
]
}
})
</script>
</body>
<body>
<div id="app">
<!-- v-bind绑定动态属性 （把src绑定到v-bind上后，等待数据加载完成，才去渲染数据，不用{{}} ） -->
<!-- 可以直接使用：的方式直接进行绑定 动态去data上的值 -->
<!-- <img v-bind:src="imgUrl" alt="">
<a v-bind:href="href">{{href}}</a> -->
<img :src="imgUrl" alt="">
<a :href="href">{{href}}</a>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
imgUrl:"https://blog.zachchan.com/wp-content/uploads/2017/12/201711071936012.png",
href:"https://blog.zachchan.com"
}
})
</script>
</body>
<body>
<div id="app">
<!-- v-on 绑定事件 ：事件名字 -->
<!-- v-on 执行方法的时候需要传递参数的时候添加(),
如果不需要传递参数就不要写了，如果需要传递参数，我们要手动传递事件源 -->
<!-- 我们可以通过@符号 取代 v-on: --> <!-- <div v-on:click="add(1,$event)">hello Vue</div> -->
<div @click="add(1,$event)">hello Vue</div>
</div>
<script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
imgUrl:"https://blog.zachchan.com/wp-content/uploads/2017/12/201711071936012.png",
href:"https://blog.zachchan.com"
},
methods:{
//我们在vue中把方法都定义在methods对象中
add:function(num,e){
//e是事件源
console.log(num,e)
alert(100)
}
}
})
</script>
</body>
vue基础入门的更多相关文章
- vue基础入门（2.1）
2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
- vue基础入门（4）
4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...
- vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
- vue基础入门（2.3）
2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...
- vue基础入门（2.2）
2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
- vue基础入门（1）
1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...
- vue 基础入门（一）
app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...
随机推荐
- PHP命令空间namespace及use的用法实践总结
以下皆为本人自我理解内容,如有失误之处,请多多包涵. 文章大纲: 使用namespace的目的 namespace的使用方法 使用use的目的 use的使用方法 使用namespace的目的: 团队合 ...
- c#游戏进程杀手
我认为写博客还是比较重要的,特别是短时间写出一个含有新知识点的软件.这样总结下这次编程经验和再捋顺一下这次编程思路.首先来谈谈为什么想做这个小程序,一是感觉自己太贪玩想控制一下,二是也锻炼下自己的编程 ...
- SSM框架开发web项目系列（二） MyBatis真正的力量
前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...
- 翻译连载 | 附录 B: 谦虚的 Monad－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- c#统计代码行数
小编,已经快学了两年编程了.昨天突发奇想,想统计下这些年到底写过多少行代码,于是做了一个这个小程序来统计代码行数.老规矩,先上图. 比较惭愧,写了两年只有2万多行.那我们还是进入下一项吧. 界面搭建我 ...
- 访问者模式（Visitor）
访问者模式(Visitor) 访问者模式把数据结构和作用于结构上的操作解耦合,使得操作集合可相对自由地演化.访问者模式适用于数据结构相对稳定算法又易变化的系统.因为访问者模式使得算法操作增加变得容易. ...
- C# Excel写入数据及图表
开发工具:VS2017 语言:C DotNet版本:.Net FrameWork 4.0及以上 使用的DLL工具名称:GemBox.Spreadsheet.dll (版本:37.3.30.1185) ...
- CMMI-4中19个PA的大致描述
组织过程资产库下面有组织级标准过程库, 这个库里一共有19各PA(就是标准过程啦) PA的英文是Process Area CM(配置管理过程,英文是Configuration Manage ...
- YiShop_网上商城系统多少钱
电子商务的发展,网上商城系统的开发也变得越来越热门.商城系统开发对于企业来说是非常有必要的,一个好的网上商城系统对于企业来说是非常重要.那么到底网上商城系统多少钱呢?下面YiShop带大家去了解. 网 ...
- Codeforces 821E Okabe and El Psy Kongroo
题意:我们现在位于(0,0)处,目标是走到(K,0)处.每一次我们都可以从(x,y)走到(x+1,y-1)或者(x+1,y)或者(x+1,y+1)三个位子之一.现在一共有N段线段,每条线段都是平行于X ...