Vue前端学习记录"/>
Vue前端学习记录
1 基础语法
v-text
设置标签的内容（要替换部分字符用差值表达式{{}}）
v-html
可以存放纯文本，内容中有html结构会被解析为标签
v-on
为元素绑定事件，事件名不需要写on,可以简写指令为@
2 简单应用
2.1 计数器
2.1.1所用知识
（1）el(挂载点)，data(数据)，methods(方法)
（2）v-on指令作为绑定事件，简写为@
（3）通过this关键字获取data数据
2.1.2代码及结果展示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello world</title></head><body><div id="app"><button @click="sub">-<button><span>{{num}}</span><button @click="add">+<button></div><script src=".js"></script><script>var app=new Vue({el:"#app",data:{num:1},methods:{add:function(){if (this.num<10){this.num++}elsealert("stop,no more") },sub:function(){if (this.num>0){this.num--}elsealert("stop,no smaller")}}})</script></body>
</html>
更多推荐
Vue前端学习记录
发布评论