Vue笔记1
2024-09-05 07:53:54
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body>
<div id="app">
{{ message }} {{name}} {{age}}
<div v-html="html">
{{ html }}
</div>
<span v-bind:class="color">颜色</span> {{ number + 1 }}
{{ 1==1 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }} <p v-if="seen">v-if</p>
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div> <script type="text/javascript">
var data = {
message: 'Hello Vue!',
name: 'ffff',
age: 12,
html: "<span style='color:red'>红色</span>",
color: '',
number:10,
seen:true
}
var app = new Vue({
el: '#app',
data: data,
methods:{
click1:function(){
console.log("click1");
},
click2:function(){
console.log("click2");
}
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
beforeMount: function() {
console.log("beforeMount");
},
mounted: function() {
console.log("mounted");
},
beforeUpdate: function() {
console.log("beforeUpdate");
},
updated: function() {
console.log("updated");
} })
data.name = '123'
data.age = '18'
app.$data.name = 'victor'
app.$watch('age', function(newVal, oldVal) {
console.log(newVal + " " + oldVal);
})
app.$data.age = '28'
app.$data.color = 'red'
</script> <style type="text/css">
.red {
color: red;
}
</style>
</body> </html>
最新文章
- sqlmap常用技巧
- Python【第四章】：socket
- WPF自定义空心文字
- 【wikioi】2822 爱在心中
- 【转】sqlserver查询数据库中有多少个表
- size_t和ssize_t
- Move Zeroes——Leetcode
- 在Apache+php中使用json来通讯
- Vim+Taglist+Ctags(源码阅读).
- chromium high cpu usage
- 调用MediaScannerConnection 发生内存泄露的解决方法
- v-for同时循环一个对象和数组
- 前端面试之vue相关的面试题
- 用keras实现基本的回归问题
- VSCode删除重复的空行
- 基于socketserver模块并发套接字
- SDC_ETL融合数据产品白皮书
- nfd指令的详细说明
- SSM的项目框架
- linux 安装php bz2扩展