前言
Vue框架是当前前端比较热门的框架之一,而且较简单易学,因此我将用一段时间来学习并记录Vue框架的学习情况。
本文将主要介绍一些Vue的简单引入方式以及基本语法,后续也将完善其他相关的知识,并给出一些小实例来说明。
一、Vue的引入方式
Vue的引入方式有很多种,但作为一个新手使用者,我是用的是去Vue.js的官网下载Vue.js的源码
官网地址如下:https://cn.vuejs.org/v2/guide/
我是用的是开发版本,下载后将Vue.js文件拖入项目的目录中,如下所示,如下是IDEA编译器版本:
然后在通过代码引入:
<script src="../js/vue.js"></script>
这样便完成了Vue.js文件的导入,可以开始使用了。
二、基本语法
1)数据域的基本格式
数据的基本格式如下(部分):
<script>
const test = new Vue({
el:'#app', //要挂载要管理的元素id
data:{ //data用于存入基本的数据信息,用逗号分隔
name:'tom',
grade:88,
message:'Hello'
},
methods: {
printHello:function(){ //methods用于保存要使用的各种方法
console.log('Hello!')
}
})
</script>
2)Mustache语法
使用Mustache语法来获取数据域中的内容,基本格式为双大括号{{内容}}
接下来是HTML代码部分:
<div id="app"> <!--id用于Vue的el挂载时使用-->
{{message}}
<br>
嘿!
{{name +' '+ name}} <!--字符串可以拼接-->
<br>
你的得分为:
{{grade+1}} <!--数值可以进行加减乘除操作-->
</div>
运行效果如下:
上述案例中全部的源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> <!--id用于Vue的el挂载时使用-->
{{message}}
<br>
嘿!
{{name +' '+ name}} <!--字符串可以拼接-->
<br>
你的得分为:
{{grade+1}} <!--数值可以进行加减乘除操作-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app', //用于挂载要管理的元素
data:{
name:'tom',
grade:88,
message:'Hello!'
}
})
</script>
</body>
</html>
三、小实例(计数器)
通过学习了Vue的基本语法,我们可以用一个小实例来总结学习成果:
需求:通过两个按钮来实现数字的加减,从0开始
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计数器</title>
</head>
<body>
<div id="app">
当前计数:{{num}}
<br>
<!-- 方法一 -->
<!-- <button v-on:click="num++">+</button>
<!- <button v-on:click="num--">-</button>-->
<!--这种方法不使用methods中的方法-->
<!-- 方法二-->
<button @click="add">+</button> <!-- 两种写法@click /v-on:click=“...” -->
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({ //可以有多个参数(el,data,methods)等等
el:'#app',
data:{
num:0
},
methods:{
add:function (){
console.log('Success add!');
this.num++; //this可以获取到本定义的变量
},
sub:function (){
console.log('Success sub!');
this.num--;
}
}
})
</script>
</body>
</html>
说明:上述代码中使用到了Vue的一个常用指令:v-on:click=‘方法名’(可以简写为@click=‘方法名’),为基本的按钮绑定指令,有点类似于基本前端的onclick,后面将更详细地介绍Vue的基本指令,本文不做过多解释。
总结
本文了主要介绍Vue.js的引入以及Mustache语法的使用
基本格式如下:
<script>
const test = new Vue({
el:'', //要挂载元素的id(要加#)
data:{ //存入相关数据
},
methods:{ //相关方法
}
})
</script>
要展示的数据:
{{数据}}
这样便可以完成前端数据的展示。