<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <!-- 导入vue -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 导入axios -->
</head>
<body>
<div id="app">
{{msg}} <!-- 和jinja2模板一样是大胡子语法 所以之后可能需要修改 避免语法冲突 -->
<a v-bind:href="url">点我有惊喜</a>
<p v-if="lv===1">青铜</p> <!-- if else 语句必须紧挨着 -->
<p v-else-if="lv===2">白银</p>
<p v-else="lv===3">王者</p>
<p v-show="show">666啊</p> <!-- v-show 是代表存在不显示 而else if是完全不存在 -->
<ul>
<li v-for="i in list">{{i}}</li><!-- 遍历 -->
</ul>
<button type="button" v-on:click="login">按钮</button> <!-- v-on:click 可以简写成 @click -->
<button type="button" @click="add(num)">点击+1</button>
<button type="button" @click="fsqq">发送请求</button>
<input v-model='model' type="" name="" id="" value="" /> <!-- input类型的双向绑定v-model -->
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
delimiters:['[[',']]'], //更换默认语法 换成双中括号的
data:{
msg:"Hello world",//渲染
url:'http://www.baidu.com',//v-bind: 双向绑定 简写直接 :
lv:2,
show:false,
list:[1,2,3,4,5],
num:0,
ygs:1,
model:'1',
},
methods:{
login:function(){
alert("点什么点")
},
add:function(num){
this.num = this.num+this.ygs
alert(num)
},
fsqq:function(){
// 发送请求
var url = 'http://127.0.0.1:8000/xxxx/'
// then 和 catch 用 => 箭头函数 this
axios.get(url).then(
(response)=>{console.log(response)}//then是成功的回调
).catch(
(error)=>{console.log(error)}// catch是失败的回调
)
},
}
})
</script>
</html>
Vue各个生命周期函数的作用
- beforeCreate
- created
- beforeMount
- mounted(重要时机初始化数据使用)
- beforeUpdate
- updated