Vue学习笔记（一）
程序员文章站
2022-06-14 22:44:51
...
起步
Vue音似 view，是前端js的一个框架，相比react来说更简单易懂方便上手操作
使用Vue
引用
国内 Vue cdn
< script src=“https://cdn.bootcss.com/vue/2.6.10/vue.js”>< /script>
下载
Vue 模板
<!--html-->
<div></div>
//javascript
<script src=“https://cdn.bootcss.com/vue/2.6.10/vue.js”></script>
<script>
let app = new Vue({
el:'',
data: {
}
})
</script>
在html代码中，给div添加一个id="app"作为标识
<div id="app"></div>
vue在引入进文档后以构造函数的形式存在，因此我们创建一个变量app，并将新建构造函数赋值给app
在构造体函数中
el:'',
data: {
}
el为element的缩写，用来绑定Vue的作用域。在html的div中，我们给div了一个id = app，
所以el的值填写为#app
利用Vue向页面添加数据
想利用Vue向页面添加数据，首先要在html页面中添加 {{ele}}
{{}}在vue中为插入符，ele为参数。这里我们将ele设为message，意为显示信息
在js代码中， data为vue的一个组件，专门用来存储需要改变页面的值。data中我们写入数据
message: 'hello vue',
这里的message为html页面中ele的实参，实参和变量名要保持同步
到这里第一个vue界面就算完成了，整体代码如下
<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--用双括号包裹，里面写着"形参"，用于和script里面的vue进行响应式交互-->
<div id="app" v-bind:title="message" v-if="seen">{{message}}</div>
< script src=“https://cdn.bootcss.com/vue/2.6.10/vue.js”>< /script>
<script>
let app = new Vue({
el:'#app', //el：element缩写，取出当前vue的作用域
data: {
//这里的实参和html中的形参名称必须相同
message: 'hello vue'
}
})
</script>
</body>
</html>
运行结果如下