一、首先新建项目,创建一个html文件
二、导入vue.js文件
第一种用的cdn方式导入的vue.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
</body>
</html>
第二种用的是安装之后放在项目里面再导入vue.js文件
两种都可以,想用哪种就用哪种
三、创建Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body>
<!--首先创建一个容器-->
<div id="root">
{{name}},我今年{{age}}岁了
</div>
<script type="text/javascript">
// 其次就可以创建Vue实例了,(想要Vue工作,就必须要先创建Vue实例)
// new Vue({}) 该语法为创建Vue实例,{}里面要传入配置对象
new Vue({
// el:"" 该配置对象用于指定Vue实例为哪个容器服务,且该配置对象的值通常为css选择器字符串
el:"#root",
// data:{} 该配置对象用于存储数据,{}里面的对象key值对应的为容器里{{}}包含的值,例:name对应容器里的{{name}}
data:{
name:"hello world",
age:19
}
})
</script>
</body>
</html>
根据此实例用浏览器打开展示数据:
四、Vue实例与容器之间只能一对一,不能一对多或者多对一
一对多:一个Vue实例对上两个容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body>
<div class="first">
{{name}},我今年{{age}}岁了
</div>
<div class="first">
{{name}},我今年{{age}}岁了
</div>
<script type="text/javascript">
new Vue({
el:".first",
data:{
name:"hello world",
age:19
}
})
</script>
</body>
</html>
展示数据后会看到只有一个数据展示出来,另一个还是原样子
多对一:两个Vue实例分别对一个容器存储数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body>
<div class="first">
{{name}},我今年{{age}}岁了
</div>
<script type="text/javascript">
new Vue({
el:".first",
data:{
name:"hello world",
}
})
new Vue({
el:".first",
data:{
age:19
}
})
</script>
</body>
</html>
展示数据后看到数据展示的也并不全面
所以一个Vue实例只能对应一个容器,一个容器也只能对应一个Vue实例!!!
五、容器{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到Vue实例中data中的所有属性
注意区分:js表达式 和 js代码(js语句)
1.表达式:一个表达式会产生一个值,可以放在任何需要这个值的地方:
(1)a
(2)a+b
(3)dem(1)
2.js代码(js语句):
(1)if(){}
(2)for(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="first">
<!-- name.toUpperCase() 读取了data数据中name对应的值的字符串的属性-->
<!-- age+1 读取了data数据中age对应的值的整数的属性-->
{{name.toUpperCase()}},我今年{{age+1}}岁了
</div>
<script type="text/javascript">
new Vue({
el: "#first",
data: {
name: "hello world",
age: 19
}
})
</script>
</body>
</html>
所以{{}}里面一定要写js表达式