Vue的官方文档https://cn.vuejs.org/1)安装Vue.js(在文档中有安装的按钮,注意安装开发版本)
再安装Vue开发者工具扩展Vue.crx,Chrome浏览器安装方式:
①:点击右上角三个点
②:点击更多工具
③:点击扩展程序
④:点击右上角的开发者模式,将他启用
⑤:将下载的Vue.crx文件直接拖动到浏览器窗口即可
2)将下载好的vue.js放入文件,并建立基本目录结构如下:
3)敲html5:再敲enter创建基本html骨架
4)导入vue.js
<script type="text/javascript" src=" ../js/vue.js"></script>
5)创建容器及Vue实例(Vue实例中的el与容器一一对应)
ps:Vue模板语法:
1.插值语法:
功能:用于解析签体内容
写法:{{xxx}},xxx是js的表达式,且可以直接读取data中的所有属性
<div id="root">
<h1>我的名字是{{name}},我的学号是{{Sno}} </h1>
</div>
<script type="text/javascript">
const x = new Vue(
{
el: '#root',
data: {
name: 'shao',
Sno: '916'
}
}
)
</script>
2.指令语法:
功能:用于解析标签(包括标签属性,标签内容,绑定事件等)
举例:v-bind:herf="xxx"或简写herf="xxx"(以v-bind为例)
<div id="root">
<h1>我的名字是{{name}},我的学号是{{Sno}} </h1>
<a v-bind:href="url">点击进入CSDN</a>
</div>
<script type="text/javascript">
const x = new Vue(
{
el: '#root',
data: {
name: 'shao',
Sno: '916',
url: 'http://www.csdn.net'
},
}
)
</script>
data相当于C语言结构体,里面的元素也可以是结构体型的,那么调用就是什么点属性了:
<h1>我的名字是{{school.name}},我的学号是{{school.Sno}} </h1>
<script type="text/javascript">
const x = new Vue(
{
el: '#root',
data: {
school: {
name: 'shao',
Sno: '916'
},
url: 'http://www.csdn.net'
},
}
)
</script>
6)数据绑定(单向绑定v-bind和双向绑定v-model)
<!--数据绑定-->
单向数据绑定:<input type="text" v-bind:value="name"><br />
双向绑定:<input type="text" v-model:value="name"><br />
<!--简写形式-->
单向数据绑定:<input type="text" :value="name"><br />
双向绑定:<input type="text" v-model="name"><br />
演示:
今日代码(2022.10.8)
<!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">
<script type="text/javascript" src=" ../js/vue.js"></script>
<title>MyFirstVue</title>
</head>
<body>
<div id="root">
<h1>我的名字是{{school.name}},我的学号是{{school.Sno}} </h1>
<a v-bind:href="url">点击进入CSDN</a><br />
<!--数据绑定-->
单向数据绑定:<input type="text" v-bind:value="name"><br />
双向绑定:<input type="text" v-model:value="name"><br />
<!--简写形式-->
单向数据绑定:<input type="text" :value="name"><br />
双向绑定:<input type="text" v-model="name"><br />
</div>
<script type="text/javascript">
const x = new Vue(
{
el: '#root',
data: {
name: 'shao',
Sno: '916',
school: {
name: 'shao',
Sno: '916'
},
url: 'http://www.csdn.net'
},
}
)
</script>
</body>
</html>