vue是什么
官方的说法是这样,简单的理解下来就是一个框架,别人帮我们写好的框架,我们只需要拿来使用就行了。
vue的引入
上面说了,vue是别人写好的框架,我们只需要拿过来用就行了。
用<script>标签来引入:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
直接引用,不用下载联网就可以使用,
当然你也可以去官方下载下来使用(点击这里进入官网)👉👉👉 vue官网
vue的使用
通过new Vue({ })方法来使用vue;
<body>
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue",
},
methods: {
details: function() {
return "用来存放方法";
}
}
})
</script>
</body>
最终效果:
1.el
类型 是一个字符串
全称 element(元素)
作用 配置控制的元素---表示vue要控制的区域,值为CSS选择器
2.data
类型 对象
作用 存放要用到的数据,数据为响应式的。
3.methods
类型 对象
作用 存放要用到的方法
4.插值表达式 {{ }}(双大括号)
用于存放 数字 字符串 数组 对象 表达式
–
虽然methods里的方法也可以写在data里,但是写在data里的方法就无法进行操作,data、methods等就相当于不同的柜子,每个柜子有每个柜子的用处,虽然都能存放数据,如果硬要放在一起也不是不行,但肯定会出现一些想不到的结果。(如果你想这样用,那就当我没说😊)