vue基础知识代码

最新推荐文章于 2024-09-09 09:40:38 发布

antRain

最新推荐文章于 2024-09-09 09:40:38 发布

阅读量533

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41146650/article/details/105256197

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue基础知识代码

数据绑定

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-学习</title>
</head>
<style>
    #app {
        text-align: center;
        margin-top: 100px;
    }
    
    ol,
    ul li {
        list-style-position: inside;
    }
</style>

<body>
    <div id="app">
        <!-- 使用“Mustache”语法 (双大括号)的文本插值:
            Mustache 标签将会被替代为对应数据对象上 msg 属性的值。
            无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
            Vue.js 都提供了完全的 JavaScript 表达式支持。
         -->
        <span>{{ msg }}</span>
        <!-- 
            <a v-on:click="doSomething">...</a>
            <a @click="doSomething">...</a>
            <a @[event]="doSomething"> ... </a>
         -->
        <button @[event]="reverseMessage">反转消息</button></br>
        </br>
        <!-- 使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 -->
        <p><span v-once>这个将不会改变: {{ msg }}</span></p>
        <span>{{model_msg}}</span>&nbsp;&nbsp;<input v-model="model_msg">
        <!-- v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定 -->
        <p v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </p>
        <!-- 条件渲染 -->
        <p v-if="seen">条件渲染</p>
        <!-- 列表渲染:
            index:索引 可选
            todo:被迭代的数组元素的别名
            todos:源数据数组
            可以用 of 替代 in 作为分隔符
            v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
            带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容
         -->
        <ol>
            <!-- <li v-for="(todo,inde) of todos"> -->
            <li v-for="(todo,index) in todos">
                {{index}}-{{ todo.text }}
            </li>
        </ol>
        <!-- 在控制台输入app.todos.push({'text':'学习springboot'}) 页面增加新的选项 -->
        <!-- 可以用 v-for 来遍历一个对象的属性。
            第一个参数为一个对象的属性
            第二个的参数为 property 名称 (也就是键名) 可选
            第三个参数为索引 可选
            在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
        -->
        <ul id="v-for-object" class="demo">
            <li v-for="(value, name, index) in object">
                {{ index }} - {{ name }} - {{ value }}
            </li>
        </ul>
        <ol>
            <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，
            -->
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
        <!-- 
            完整语法：<a v-bind:href="url">...</a>
            缩写：<a :href="url">...</a>
            动态参数的缩写 (2.6.0+) <a :[key]="url"> ... </a> 
        -->
        <p><a :[key]="url"> {{url}} </a></p>
        <!-- 一个数组传给 v-bind:class，以应用一个 class 列表 -->
        <div v-bind:class="[activeClass, errorClass]"></div>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <!--用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。-->
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <!-- <input placeholder="Enter your username" key="username-input"> -->
            <input placeholder="Enter your username">
          </template>
        <template v-else>
            <label>Email</label>
            <!-- <input placeholder="Enter your email address" key="email-input"> -->
            <input placeholder="Enter your email address">
          </template>
        <!-- v-show：用于根据条件展示元素的选项，带有 v-show 的元素始终会被渲染并保留在 DOM 中
        v-show 只是简单地切换元素的 CSS 属性 display
        v-show 不支持 <template> 元素，也不支持 v-else。
        v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
        当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
        -->
        <h1 v-show="seen">Hello!</h1>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        });
        //每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!',
                message: '页面加载于 ' + new Date().toLocaleString(),
                key: 'href',
                url: 'https://cn.vuejs.org/',
                seen: true,
                event: 'click',
                activeClass: 'active',
                errorClass: 'text-danger',
                type: 'B',
                loginType: 'username',
                todos: [{
                    text: '学习HTML5+CSS3+JavaScript'
                }, {
                    text: '学习 Vue'
                }, {
                    text: '学习 vue-cli'
                }],
                model_msg: '',
                groceryList: [{
                    id: 0,
                    text: '蔬菜'
                }, {
                    id: 1,
                    text: '奶酪'
                }, {
                    id: 2,
                    text: '随便其它什么人吃的东西'
                }],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'antRain',
                    publishedAt: '2020/4/1'
                }
            },
            methods: {
                reverseMessage: function() {
                    this.msg = this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

事件处理

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-学习</title>
</head>
<style>
    #app {
        text-align: center;
        margin-top: 100px;
    }
    
    ol,
    ul li {
        list-style-position: inside;
    }
</style>

<body>
    <div id="app">
        <!-- 用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 -->
        <button v-on:click="counter += 1">Add 1</button>&nbsp;
        <button v-on:click="add(2)">调用方法Add 2</button>
        <p>The button above has been clicked {{ counter }} times.</p>
        <!-- 
            事件修饰符:.stop
            .prevent
            .capture
            .self
            .once
            .passive
            阻止单击事件继续传播: <a v-on:click.stop="doThis"></a>
            提交事件不再重载页面： <form v-on:submit.prevent="onSubmit"></form>
            修饰符可以串联：<a v-on:click.stop.prevent="doThat"></a>
            只有修饰符：<form v-on:submit.prevent></form>
            添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
            <div v-on:click.capture="doThis">...</div>
            只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的<div v-on:click.self="doThat">...</div>
            点击事件将只会触发一次：<a v-on:click.once="doThis"></a>
         -->


        <!-- 按键修饰符
            只有在 `key` 是 `Enter` 时调用 `vm.submit()：只有在 `key` 是 `Enter` 时调用 `vm.submit()
            可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：
            <input v-on:keyup.page-down="onPageDown">
        -->

        <!-- 
            v-model:双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
             会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

             v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
                text 和 textarea 元素使用 value 属性和 input 事件；
                checkbox 和 radio 使用 checked 属性和 change 事件；
                select 字段将 value 作为 prop 并将 change 作为事件。
         -->

        <input v-model="message" placeholder="edit me">&nbsp;
        <span>Message is: {{ message }}</span></br>

        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label><br>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label> &nbsp;
        <span>Checked names: {{ checkedNames }}</span><br>
        <br>
        <input type="radio" id="male" value="male" v-model="sex">
        <label for="male">male</label>&nbsp;
        <input type="radio" id="female" value="female" v-model="sex">
        <label for="female">female</label>&nbsp;
        <span>sex: {{ sex }}</span><br>
        <select v-model="selectLang">
            <option disabled value="">请选择</option>
            <option>Java</option>
            <option>C++</option>
            <option>python</option>
          </select>
        <span>Selected: {{ selectLang }}</span>
        <br>
        <!-- 用 v-for 渲染的动态选项： -->
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
              {{ option.text }}
            </option>
          </select>
        <span>Selected: {{ selected }}</span>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                counter: 0,
                message: '',
                checkedNames: [],
                checked: false,
                sex: '',
                selectLang: '',
                selected: 'A',
                options: [{
                    text: 'One',
                    value: 'A'
                }, {
                    text: 'Two',
                    value: 'B'
                }, {
                    text: 'Three',
                    value: 'C'
                }]
            },
            methods: {
                add: function(num) {
                    this.counter += num;
                }
            }
        })
    </script>
</body>

</html>

组件

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-学习</title>
</head>
<style>
    #app {
        text-align: center;
        margin-top: 100px;
    }
    
    ol,
    ul li {
        list-style-position: inside;
    }
</style>

<body>
    <div id="app">
        <!-- 可以将组件进行任意次数的复用 -->
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 定义一个名为 button-counter 的新组件 先定义
        /*
        组件名大小写：使用 kebab-case (短横线分隔命名) 定义一个组件时，
        你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>
        当使用 PascalCase (首字母大写命名) 定义一个组件时，在引用这个自定义元素时两种命名法都可以使用。
        也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
        */
        Vue.component('button-counter', {
            // 全局注册：组件可以用在其被注册之后的任何新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
            //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
            data: function() {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        });

        //局部注册.局部注册的组件在其子组件中不可用
        var ComponentA = { /* ... */ };
        var ComponentB = {
            components: {
                'component-a': ComponentA
            }
        };

        /*
        import/require 使用一个模块系统
        import ComponentA from './ComponentA.vue'

        export default {
        components: {
            ComponentA
        },
        // ...
        }
        */

        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            component: {
                'component-a': ComponentA,
            }
        });
    </script>
</body>

</html>