[Vue] 新手上路

Lettle
Lettle
发布于 2022-08-06 / 4 阅读
0

[Vue] 新手上路

开发环境

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

代码里有较为详细的注释