前提,建议先学会前端几大基础:HTML、CSS、JS、Ajax,不然不好懂
这一专栏知识将一次性将vue、vue2、vue3全部讲明白
什么是 Vue?
Vue 就是用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,简单说就是帮助你更简单地高效地开发用户界面,可以省很多代码。
这里需要注意一个概念:
1、一个简单的vue代码只需要在HTML文件的js部分、或者JS文件里,用el挂载vue就可以写vue的代码了,这样的vue代码你们可以理解为vue1(虽然网上貌似没有vue1这个说法,但是仅作理解)
2、而我们真正开发一个项目的时候是不会在一个html文件里写vue代码的,了解过项目的朋友们应该知道,一个项目里包含多个文件目录,多种文件类型,那么在工程化项目开发里,我们用的就是vue2、vue3,不需要el挂载这样了,而取而代之的是在一个vue文件里写html的代码。
3、html文件里上面head那块写css代码、中间body部分写html代码、下面script部分写js(vue)代码;而vue2、vue3里是在一个vue文件里写这三,只不过暂时理解为顺序换一下,上面写html代码、中间js(vue)代码、下面css代码。
一、怎么引用使用Vue?
(先讲第一种最简单的,在html文件里写“vue1”代码形式)
首先怎么用vue?第一种办法是在本地搭建vue,但是我不推荐,因为我自己也没搞懂。第二种办法是用网上的CDN,也即是引入script标签,script标签直接引用在线vue的CDN文件。既然我们要高效学习,那就别搞那么多,我本人是直接去官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js这里,点击【快速上手】,然后找到【通过 CDN 使用 Vue】,或者你直接忽略我前面那些废话,直接在你的HTML文件里写入这段代码:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
要是官网那个不行,你再试一下这个,反正我自己用了可以
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
再不行试这个,还不行你就转行吧,你电脑不适合让你搞IT行业
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
然后就可以正常使用Vue语言了
二、基本的Vue语法框架
简单记忆:就是1、直接在JavaScript里,创建一个Vue对象:new Vue( )
2、然后在这个对象里传【对象参数】
3、在这个对象里写它的属性、成员,对象的语法就跟JavaScript的一模一样
例子:
<script>
//注意!!Vue第一个字母一定要大写!!!
new Vue({
//你想控制、获取到哪个HTML元素,就在这声明它挂载
//类似JavaScript的document.querySelector()一样
el: '这就是css选择器',
//这里是成员变量
data: {
变量1: ...,
变量2: ...,
},
//这是成员函数(或者说成员方法),注意!!!别漏了methods最后一个字母s
methods: {
方法1: function(){
//函数体
},
方法2: function(){
//函数体
}
}
})
</script>
易错点:
1、Vue忘记把第一个字母大写
2、methods写成method漏了s
3、el挂载点忘了写“#”、“.”这些
4、el和data和methods这些是同级的元素,要用逗号“,”隔开
三、跟HTML部分结合
只需记住一点,这里用的是“双花括号语法”,在HTML代码里用{{ }}包住一个变量,然后在Vue对象里的【data】里设置【同名字变量】,这样HTML这块地方的内容,就由Vue的【data】决定了
例子:
<body>
<div id="app">
{{ message }}
<h2>
{{ animal.name }}
{{ animal.phone }}
</h2>
<ul>
<li> {{ state[0] }} </li>
<li> {{ state[1] }} </li>
<li> {{ state[2] }} </li>
<li> {{ state[3] }} </li>
</ul>
</div>
<script>
new Vue({
//HTML那里的id名设置了是“app”,这里就绑定他
el: '#app',
data: {
//普通成员变量
message: 'hello 岑梓铭',
hahaha: '哈哈哈',
//对象成员
animal:{
name: '癫狗',
phone: '18927366541'
},
//数组成员
state:['广东','上海','山东','新疆']
}
})
</script>
</body>
至于函数,现在还没学到事件指令,暂时先不讲函数