开发环境
VSCode 1.70.0
npm 8.10.0
快速开始
Hello Vue
先给出代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<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-test</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="static/js/vue.global.min.js"></script>
<script>
const HelloApp = Vue.createApp({
data() {
return {
message: "Hello Vue3!"
}
}
});
var vm = HelloApp.mount('#app');
document.write(vm.$data.message);
</script>
</body>
</html>1. 我们在代码中创建了一个 HelloApp 对象，并为其创建了一个data函数。
2. 用Vue.createApp来创建这个VueApp，最后用mount挂载到id为app的div上。
3. 运行后即可显示此内容。
注意：经过研究发现在F12中可以使用
vm.$data.message = "Hello"来改变其内容，并且是实时更新！！！
Methods
此例代码:
<!DOCTYPE html>
<html lang="zh-cn">
<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-test</title>
</head>
<body>
<div id="app">
{{ message }} <br />
{{ count }}
<p v-once>这个count不会改变: {{count}} </p>
<button onclick="vm.increment();">点我触发vm.increment()</button>
</div>
<script src="static/js/vue.js"></script>
<script>
const HelloApp = Vue.createApp({
data() {
return {
message: "Hello Vue3!",
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
});
var vm = HelloApp.mount('#app');
</script>
</body>
</html>这个例子是在上一个例子的基础上加了一点代码，我们可以看到createApp时多了一个methods属性。在这里我们可以为vm创建自定义的函数，并通过vm.increment()来调用。
这里我们使用一个按钮来调用这个函数，点击按钮后可以看到页面发生了一些神奇的变化...
注意：如果不想改变标签的内容，可以通过使用
v-once指令执行一次性地插值，当数据改变时，插值处的内容不会更新例如
<span v-once> {{count}} </span>
第一个案例
第一个案例里罗列了好多奇奇怪怪的用法，直接把代码丢出来算了...
<!DOCTYPE html>
<html lang="zh-cn">
<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-test</title>
</head>
<body>
<div id="app">
<!-- Vue: 有关字符串的输出及变化 -->
{{ message }} <br />
<p>Vue表达式: 这样反转字符: {{ message.split('').reverse().join('') }}</p><button v-on:click="reverseString();">点我把原来的字符串反转</button><br />
{{ count }} <br />
<p v-html="span"></p>
<p v-once>这个count不会改变: {{count}} </p>
<!-- 这里v-bind:disabled貌似不会实时更新... -->
<button v-bind:disabled="incDisabled" onclick="vm.increment();">点我触发vm.increment()</button> <br />
<!-- Vue: for循环列表 -->
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
<input v-model="message"> <br />
<!-- Vue: 标签if-else -->
<!-- 注: 不要加var和; 会变得不幸 -->
<!-- 注: 每当有要显示的内容变化都会重新执行random -->
<p v-show="false">{{ rand = Math.random() }}</p>
<div v-if="rand > 0.7">
随机数大于0.7
</div>
<div v-else-if="rand > 0.5">
随机数大于0.5小于等于0.7
</div>
<div v-else>
随机数小于等于0.5
</div>
</div>
<script src="static/js/vue.global.min.js"></script>
<script>
const HelloApp = Vue.createApp({
data() {
return {
message: "Hello Vue3!",
count: 0,
span: '<span style="color: red">这里会显示红色！</span>',
incDisabled: null,
sites: [
{ text: "Lettle.cn"},
{ text: "Runoob.com"}
]
}
},
methods: {
increment() {
this.count++;
},
reverseString() {
this.message = this.message.split('').reverse().join('');
}
}
});
var vm = HelloApp.mount('#app');
</script>
</body>
</html>新增代码样例：
1. 有关字符串的输出及变化
2. for循环列表
3. 标签if-else
代码里有较为详细的注释