两种方式框架包(Vue.js):
1)cdn形式(不用下载包)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2)直接把包下载到本地
把三个包(jquery-3.6.0.js,bootstrap.min.js,vue.js)放到js文件夹中
bootstrap.min.js做前台页面
把bootstrap.min.css放入css文件夹中
<script src="js/vue.js"></script>
文本插值
插数据
1.创建文件:右键base——新建文件——起名1-temp.html
快捷键 !+回车 会出现页面框架
创建Vue 对象方式:new Vue
1)建div放渲染范围,渲染el:#inter——对inter部分进行渲染,#:id
可以在div中写多个 {
{message}}
<div id="=inter">
{
{message}}
</div>
2)数据驱动:加数据块
data:{
message:'文本插入'
}
所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插入</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="inter">
{
{message}}
</div>
<script>
new Vue({
el:'#inter',
data:{
message:'文本插入'
}
})
</script>
</body>
</html>
页面效果图:
赋变量Vue
let firstVve = new Vue({
el:'#inter',
data:{
message:'文本插入'
}
})
打开开发者工具:
该数据:firstVve.message=‘1234’
结果也变成1234:
也可以进行运算—在{}里可以写表达式
<div id="inter">
{
{message}}
{
{100+300}}
{
{'hello'+'word'}}
</div>
所有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插入</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="inter">
{
{message}}
{
{100+300}}
{
{'hello'+'word'}}
</div>
<script>
let firstVve =