Vue2官网:Vue.js
一、Vue的概念
概念: 是一套 构建用户界面 的 渐进式 框架
什么是构建用户界面?----------------------就是基于数据渲染出用户可以看到的界面
什么是渐进式框架?-------------------------不一定要把vue所有的API学完才能开发
什么是框架?----------------------------------就是一套完整的解决方案,实现了大部分功能,我们只需要按照一定的规则去编码
二、Vue2入门
核心四步骤:
1.准备容器(例如:div)
//这个是容器,Vue所管理的范围,这里将来会编写一些用于渲染的代码逻辑
<div id="app">
</div>
2.引包(可以去官网找)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
3.创建Vue实例
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg2:'Yes~I am so good'
}
})
</script>
el: 指定挂载点,指定 Vue 管理的是哪个盒子,后面#app表示的就是id名为app的容器,如果写了“.app”那么就是表示类名为app的容器,建议用id
data: 提供数据
4.指定配置项,渲染数据
有了data提供的数据,我们可以用Vue提供的插值表达式来渲染出data中的数据,在容器中用两个花括号扩起来,在里面直接写上变量名,例如当我们要在页面中渲染msg,就可以这么写
<div id="app">
{{msg}}
</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>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg2:'Yes,I am so good'
}
})
</script>
</body>
</html>
三、插值表达式
插值表达式语法:{{ 表达式 }}
作用:利用表达式进行插值,渲染到页面中
什么是表达式?-------------------------表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果
正确语法:
<h3>{{title}}<h3>
<p>{{nickName.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>
错误用法:
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错
2.支持的是表达式,而非语句,比如:if for ...
<p>{{if}}</p>
3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>