Version: Next
info

本笔记中，所有插值表达式因为网页转义问题，都由 {{}}替换为了{ {} }

1. Vue引言

渐进式JavaScript框架

  • 渐进式JavaScript框架

  • 特点

    • 易用 html、css、JavaScript
    • 灵活 开发灵活、多样性
    • 高效 开发前端页面非常搞笑

  • 总结

    Vue是一个JavaScript框架

1.1 对于后端开发人员，什么是Vue

通过操作很少的DOM，甚至不需要操作页面中的任何DOM元素，就很容易的完成数据和视图绑定

称为双向绑定——MVVM

注意：在使用Vue过程中，页面中不要在引入JQuery，因为Vue不推荐直接操作DOM元素

Html css -> JavaScript -> JQuery -> angularJs -> Vue

作者：尤雨溪

2. Vue入门

2.1 下载与安装Vue

https://cn.vuejs.org/v2/guide/

  • 开发版本 包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 生产版本 优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

新建一个html5文件

在大前端时代，推荐将引入script语句写在临近调用位置的地方，当然像过去一样写在head中也是可以的

  • el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例（对象）。
  • data:Vue 实例的数据对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue第一个入门案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例
data: { //Vue 实例的数据对象。
msg: "Hello Vue"
},
});
</script>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
</html>

会发现无法正确渲染出msg中的信息，这是因为在定义div之前，就执行了渲染数据指令，这反映了严格的书写顺序问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue第一个入门案例</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例
data: { //Vue 实例的数据对象。
msg: "Hello Vue"
},
});
</script>
</body>
</html>

el选择器不仅包含选中的元素，还包含它的子元素，在div下面定义一个span，数据也可以渲染进span标签内

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue第一个入门案例</title>
</head>
<body>
<div id="app">
{{msg}}
<br>
<span>
{{username}}, {{pwd}}
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例
data: { //Vue 实例的数据对象。
msg: "Hello Vue",
username:"bsx",
pwd: "123456"
},
});
</script>
</body>
</html>

2.3 data定义对象、数组、其他数据类型

定义一个user对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data定义对象，数组，其他数据类型</title>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<h3>{{user}}</h3>
<h3>名称：{{user.name}}</h3>
<h3>信息：{{user.msg}}</h3>
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "hello vue",
user: {
name: "包青天",
msg: "开封好地方"
}
}
});
</script>
</body>
</html>

定义一个数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data定义对象，数组，其他数据类型</title>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<h3>{{lists}}</h3>
<h3>下标为2的元素：{{lists[2]}}</h3>
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "hello vue",
lists:['上海', '北京', '西安']
}
});
</script>
</body>
</html>
hello vue
[ "上海", "北京", "西安" ]
下标为2的元素：西安

对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data定义对象，数组，其他数据类型</title>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<h3>{{lists}}</h3>
<h3>下标为2的元素：{{lists[2]}}</h3>
<h3>{{users[0].name}}</h3>
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "hello vue",
lists: ['上海', '北京', '西安'],
users: [{
name: "Alice",
age: 23
}, {
name: "bob",
age: 28
}]
}
});
</script>
</body>
</html>

在`{{}}`中书写表达式、运算符、逻辑运算

  • 字符串拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{msg +"啊"}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
msg: "哈哈哈"
}
})
</script>
</body>
</html>
哈哈哈啊
  • 使用内建函数，如toUpperCase
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 由于网页转义问题，加了空格，运行时请去掉空格-->
{ {msg.toUpperCase()} }
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
msg: "abc"
}
})
</script>
</body>
</html>
ABC

3.总结

总结：

  1. Vue实例（对象）中el属性，代表Vue的作用范围，日后再Vue的作用范围内都可以使用Vue语法
  2. Vue实例（对象）中data属性，用来给Vue实例绑定数据，绑定的数据可以通过{{}}在Vue作用范围内取出
  3. 在使用{{}}取数据时，可以在其中使用表达式、运算符、逻辑运算
  4. el属性中可以使用任何css、JQuery选择器，但在使用Vue开发时，推荐使用id选择器