Vue.js基础-01-Vue实例和Vue表达式（实例化，常用选
2022-09-22 本文已影响0人
玄德公笔记
1. 从一段代码说起
1.1 第一段代码
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>crow_yuan</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
- 效果
Hello Vue.js!
1.2 Vue的使用说明
从示例中我们可以看到，Vue的使用有两部分：
- Vue表达式
{{ }}中即是Vue的表达式 - Vue实例
new Vue({})是我们将Vue实例化。
2. Vue实例
2.1 Vue 实例化
语法示例
var vm = new Vue({
// 选项
})
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>crow song</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>name : {{name}}</h1>
<h1>urla : {{url}}</h1>
<h1>{{description()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
name: "玄德公",
url: "https://blog.csdn.net/xingzuo_1840?type=blog",
},
methods: {
description: function() {
return this.name + "：开发+运维 的技术笔记";
}
}
})
</script>
</body>
</html>
{{ }}用于输出对象属性和函数返回值。
2.2 常用选项
上例中我们可以找到 Vue实例中的属性，常用属性如下：
- el
指定了 DOM 元素中的 id，该Vue实例可以在指定id的DOM的元素中被使用
在上面实例中，el选项指明了该Vue实例可以在 id 为 vue_det的DOM元素中使用。
- data
用于定义属性
上例中有2个属性分别为：name、url。
- methods （方法）
用于定义的函数，可以通过 return 来返回函数值。
我们将在 后边的文章 中说明
- computed（计算属性）
主要是对原数据进行改造输出。
我们将在 后边的文章 中说明
- filter（过滤器）
用于过滤字符或传递数据
我们将在 后边的文章 中说明
- watch
主要用于监测data中的数据变化
我们将在 后边的文章 中说明
2.3 实例属性
2.3.1 用户自定义属性
说明
上文可知，我们可以在Vue实例中的data选项中定义属性和属性值
示例 （修改对象属性/原始数据）
关羽初始设定，势力是 魏，攻击力100。
修改Vue实例的 “势力属性”为蜀，原始值中势力的值也变为蜀
修改原始数据中攻击力值为 120，Vue对应属性值也变为120.
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>姓名 : {{name}}</h1>
<h1>势力 : {{belong}}</h1>
<h1>attack : {{attack}}</h1>
</div>
<script type="text/javascript">
var data = { name: "关羽", belong: "魏", attack: 100}
var vm = new Vue({
el: '#vue_det',
data: data
})
// 比较属性值vm.belong 和原始数据 data.belong
document.write("比较属性和原始数据：",vm.belong === data.belong,"<br>","<br>")
// 修改属性值，原始数据改变
vm.belong = "蜀"
document.write("千里走单骑，势力改变："+data.belong + "<br>"+"<br>") // Runoob
// 修改原始数据，对象属性值改变。
data.attack = 120
document.write(vm.attack)
</script>
</body>
</html
- 显示结果
不管从属性或者原始数据中修改，其结果都是一样的。
image.png
2.3.2 实例选项的属性
说明
Vue实例的选项也可以作为属性取值，
用前缀 $和用户定义的属性区分开来。
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>姓名 : {{name}}</h1>
<h1>势力 : {{belong}}</h1>
<h1>attack : {{attack}}</h1>
</div>
<script type="text/javascript">
var data = { name: "关羽", belong: "魏", attack: 100}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
</body>
</html>
3. Vue 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。我们写在DOM元素 的
{{}}中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW YUAN</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:class="'class' + id">{{message}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: false,
message: '鸦啼正落花',
id: 1
}
})
</script>
</body>
</html>
-
结果显示
image.png
image.png
