视频教程地址:https://www.bilibili.com/video/BV1GL4y1v79M
视频教程案例实现:http://maizuo.18shu.cn/
此系列文章是对学习过程中的各知识点的整理与记录。
Vue可以直接使用script标签引入html页面,引入之后可以直接使用。
没有特殊说明的情况下,引入的vue版本及代码都是基于vue2版本的。
<script src=”https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”></script>
Vue的基本用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>00-vue的引入</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{mytext}}
</div>
<script>
new Vue({
el: "#box",
data: {
mytext: "helloworld"
}
})
</script>
</body>
</html>
按照惯例,先在页面上写一个helloworld
首先给div绑定一个id=”box”,在script中new一个Vue实例,用el属性绑定id为box的div,这个div里的内容就可以使用vue的语法。
在data属性中自定义一个mytext的状态,值为”helloworld”,在div中使用双大括号包裹状态字段{{mytext}},浏览器打开页面即可输出helloworld。
基本的使用步骤:
1.引入vue的js文件,使用cdn或者下载到本地使用路径引入都可以。
2.new一个Vue实例,使用el绑定dom节点。
3.在data中定义状态
4.在页面中使用{{}}使用状态值。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧
请登录后发表评论
注册