1、如何引入Vue
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
</html>
当引入vue之后,你的全局多了一个名为Vue的构造函数
所以就可以用 new Vue()
1.1 script 标签解释
- 作用:用于定义客户端脚本,常用于引入 JavaScript 文件
- 说明:它既可包含脚本语句,也可以通过src属性指向外部脚本文件,在包含脚本语句时,只需要使用type属性即可。
// 在包含脚本语句的时候 只需要使用type属性就行
<script type="text/javascript">
var i = 10;
if (i < 5) {
// 代码内容
}
</script>
// 在用 src 引入外部脚本语句的时候,<script></script> 之间为空
// 如果既不使用async也不使用defer,那么在浏览器继续解析页面之前,立即读取并执行脚本
<script src="" type="text/javascript" charset="UTF-8" async="async"></script>
<script src="" type="text/javascript" charset="UTF-8" defer="defer"></script>
<script type="text/javascript">
// 放在之间的是文本类型(text)。
// javascript是告诉浏览器里面的文本是属于javascript脚本
// <script> 不能使用单标签,必须使用 <script></script> 才可正常使用
2、怎么测试是否引入vue
2.1 去除上图中Download…
直接安装 vue-devtools(开发者工具)
- git命令下载:git clone https://github.com/vuejs/devtools.git
- 安装依赖:npm install
- 编译:npm run build
参考:https://www.jianshu.com/p/8bba67b017ff
有问题参考:https://blog.csdn.net/drhrht/article/details/123227510
安装之后的结果
这是一个提示:
您正在开发模式下运行Vue。在进行生产部署时,请确保打开生产模式。
这里面所有的东西都是对 vue 进行全局的配置,意思:一次修改到处可用
2.2 关闭提示
分析:影响这个提示的选项是:productionTip ,我们看下官网对productionTip 的解释
怎么修改,如下
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
</script>
</body>
</html>
3、Vue案例
案例第一个逻辑
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>Hello.尚硅谷</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
</script>
</body>
</html>
页面
思考
在代码中Vue已经引入了,全局的提示取消配置也已经准备好了,为什么没有使用Vue呢?
只能说Vue已经待命了,没有写让Vue工作的代码
3.1 Vue 案例之 差值语法 {{}}
3.1.1 使用Vue
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>Hello.尚硅谷</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建 Vue 实例
const x = new Vue({
// el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。
// el:document.getElementById('root')还有这种写法 不常用
el: '#root',
})
</script>
</body>
</html>
解释
看上面代码:上面说了引入Vue 就相当于全局多了一个名为Vue的构造函数,所以我们用 new Vue()来创建一个Vue实例对象
下面的Vue和上面的div容器形成了一一对应的关系,div中的值会随着vue实例变化而变化。
- 其中 el 全称element(元素) ,后面的值’#root’ 是 vue 用id选择器指定一个容器
- 还可以上面 class = “root” el后面写成 ‘.root’
3.1.2 差值语法使用
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>Hello.{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建 Vue 实例
const x = new Vue({
el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
data: { // data 中用于存储数据,数据供 el 所指定的容器去使用 容器以外的容器不负责,这个值我们暂时先写成一个对象
name:'尚硅谷'
}
})
</script>
</body>
</html>
- el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById(‘root’)还有这种写法 不常用
- data 中用于存储数据,数据供 el 所指定的容器去使用 容器以外的容器不负责,这个值我们
暂时
先写成一个对象 - const x 可以不用
3.1.3 如果有两个相同的容器,vue以哪个为准
注意:一个vue实例不能同时接管两个容器
一个vue实例对应两个root容器
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div class = "root">
<h1>Hello.{{name}}</h1>
</div>
<div class = "root">
<h1>Hello.{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建 Vue 实例
const x = new Vue({
el: '.root', // el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
data: { // data 中用于存储数据,数据供 el 所指定的容器去使用
name:'尚硅谷'
}
})
</script>
</body>
</html>
页面
两个vue实例对应一个 root 容器
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>Hello.{{name}} {{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建 Vue 实例
new Vue({
el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
data: { // data 中用于存储数据,数据供 el 所指定的容器去使用
name:'尚硅谷'
}
})
new Vue({
el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
data: { // data 中用于存储数据,数据供 el 所指定的容器去使用
address:'北京昌平'
}
})
</script>
</body>
</html>
页面有报错
<!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>初始Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>Hello.{{name}}.{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建 Vue 实例
new Vue({
el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务,值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
data: { // data 中用于存储数据,数据供 el 所指定的容器去使用
name:'尚硅谷',
address:'北京'
}
})
</script>
</body>
</html>
3.2 初识Vue总结
-
1、想让Vue 工作,就必须创建一个Vue 实例,且要传入一个配置对象(el 或者 data)
-
2、root 容器里的代码依然符合html规范,只不过混入一些特殊的Vue语法(本文就是差值语法)
-
3、root 容器里面的代码被称为【Vue 模板】
-
4、Vue 实例和容器是一一对应的
-
5、真实开发中只有一个Vue 实例,并且会配合着组件一起使用
-
6、{{xxxx}} 中的 xxxx 要写js 表达式,且 xxxx 可以自动选取到 data 中的所有属性
-
7、一旦 data 中的数据要发生改变,那么页面中用到该数据的地方也会自动更新
-
注意区分:js表达式 和 js 代码(语句)
1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
(1) a
(2) a+ b
(3) demo(1)
(4) x === y ? ‘a’ : ‘b’
2、js 代码(语句)
(1) if () {}
(2) for() {}