Vue学习笔记（一）

最新推荐文章于 2024-07-30 22:36:34 发布

0 error（s）0 warning（s）

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量79

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44845533/article/details/103678928

版权

起步

Vue音似 view，是前端js的一个框架，相比react来说更简单易懂方便上手操作

使用Vue

引用

国内 Vue cdn

< script src=“https://cdn.bootcss.com/vue/2.6.10/vue.js”>< /script>

下载

Vue官方下载

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>