vue部分入门知识点代码示例

1. Vue实例

Vue.js的核心是Vue实例，用来管理你的应用。以下是一个创建Vue实例的示例：


html>
<html>
<head>
    <title>Vue.js入门示例title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
head>
<body>
    <div id="app">
        {{ message }}
    div>
 
    <script>
        // 创建一个Vue实例
        var app = new Vue({
            el: '#app', // 关联实例到id为app的HTML元素
            data: {
                message: 'Hello, Vue!'
            }
        });
    script>
body>
html>

上面的示例中，我们引入了Vue.js库，创建了一个Vue实例，并将其关联到一个HTML元素（id为app的
）。
data属性包含了我们的数据，这里是一个message属性，它在HTML模板中用双花括号语法插入。

2. 数据绑定

Vue.js支持数据绑定，当数据改变时，视图会自动更新。以下是一个简单的示例：


<div id="app">
    <p>{{ message }}p>
    <button @click="changeMessage">Change Messagebutton>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        },
        methods: {
            changeMessage: function() {
                this.message = 'New Message!';
            }
        }
    });
script>

在这个示例中，我们在Vue实例中定义了一个方法changeMessage，它会在按钮点击时改变message属性的值。

3. 条件与循环

Vue.js允许你使用指令来处理条件渲染和循环渲染。以下是示例：


<div id="app">
    <p v-if="showMessage">{{ message }}p>
    <ul>
        <li v-for="item in items">{{ item }}li>
    ul>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!',
            showMessage: true,
            items: ['Item 1', 'Item 2', 'Item 3']
        }
    });
script>

v-if用于条件渲染，只有当showMessage为true时，段落才会显示。
v-for用于循环渲染，将items数组中的项渲染为列表项。

4. 事件处理

Vue.js允许你轻松地处理用户交互事件。以下是一个事件处理的示例：


<div id="app">
    <button @click="sayHello">Say Hellobutton>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            sayHello: function() {
                alert('Hello, Vue!');
            }
        }
    });
script>

这个示例中，我们使用@click指令来监听按钮点击事件，并调用sayHello方法来弹出一个提示框。

5. 组件

Vue.js允许你创建可复用的组件。以下是一个简单的组件示例：


<div id="app">
    <my-component>my-component>
div>
 
<script>
    // 定义一个全局的组件
    Vue.component('my-component', {
        template: 'This is a custom component
'
    });
 
    var app = new Vue({
        el: '#app'
    });
script>

这个示例中，我们定义了一个名为my-component的全局组件，然后在HTML中使用它。

6. 生命周期钩子

Vue.js提供了生命周期钩子函数，允许你在组件的不同生命周期阶段执行代码。以下是一个生命周期钩子的示例：


<div id="app">
    <p>{{ message }}p>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        },
        beforeCreate: function() {
            console.log('Before Create Hook');
        },
        created: function() {
            console.log('Created Hook');
        },
        mounted: function() {
            console.log('Mounted Hook');
        }
    });
script>

这个示例中，我们定义了beforeCreate、created和mounted生命周期钩子函数，并在控制台中打印消息以便观察组件生命周期。

7. 计算属性

Vue.js允许你定义计算属性，这些属性根据其他属性的变化而动态计算。以下是一个计算属性的示例：


<div id="app">
    <p>{{ fullName }}p>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: 'John',
            lastName: 'Doe'
        },
        computed: {
            fullName: function() {
                return this.firstName + ' ' + this.lastName;
            }
        }
    });
script>

在这个示例中，我们定义了一个计算属性fullName，它动态计算出firstName和lastName的合并结果。

8. 条件类与样式绑定

Vue.js允许你通过条件判断动态绑定类和样式。以下是一个条件类和样式绑定的示例：


<div id="app" :class="{ 'active': isActive, 'error': hasError }">
    <p :style="{ color: textColor, fontSize: textSize + 'px' }">Styled Textp>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            hasError: false,
            textColor: 'blue',
            textSize: 20
        }
    });
script>

在这个示例中，我们使用:class和:style指令来动态绑定类和样式，具体取决于数据属性的值。

9. 表单处理

Vue.js使表单处理变得更加简单，可以轻松地实现双向数据绑定。以下是一个简单的表单处理示例：


<div id="app">
    <input v-model="message" placeholder="Type something">
    <p>You typed: {{ message }}p>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    });
script>

这个示例中，我们使用v-model指令在输入框和数据属性message之间建立双向绑定，实现实时更新。

10. Vue Router

Vue Router是Vue.js的官方路由管理器，用于构建单页面应用（SPA）。以下是一个简单的Vue Router示例：


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">script>
 
<div id="app">
    <router-link to="/home">Homerouter-link>
    <router-link to="/about">Aboutrouter-link>
 
    <router-view>router-view>
div>
 
<script>
    // 定义组件
    var HomeComponent = { template: 'Home Component
' };
    var AboutComponent = { template: 'About Component
' };
 
    // 创建Vue实例并配置路由
    var app = new Vue({
        el: '#app',
        router: new VueRouter({
            routes: [
                { path: '/home', component: HomeComponent },
                { path: '/about', component: AboutComponent }
            ]
        })
    });
script>

这个示例中，我们引入了Vue Router库，定义了两个组件HomeComponent和AboutComponent，并配置了路由。

11. 自定义指令

Vue.js允许你创建自定义指令来扩展Vue的功能。以下是一个自定义指令的示例：


<div id="app">
    <p v-highlight="'yellow'">This text is highlightedp>
div>
 
<script>
    // 注册全局自定义指令 v-highlight
    Vue.directive('highlight', {
        bind(el, binding) {
            // el是绑定指令的元素
            // binding.value是指令的参数，在这里是颜色
            el.style.backgroundColor = binding.value;
        }
    });
 
    var app = new Vue({
        el: '#app'
    });
script>

这个示例中，我们创建了一个名为v-highlight的自定义指令，用于修改元素的背景颜色。

12. Vuex 状态管理

当应用变得复杂时，状态管理变得关键。Vue.js提供了Vuex库来管理应用的状态。以下是一个简单的Vuex示例：


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex@3.6.2/vuex.js">script>
 
<div id="app">
    <p>Count: {{ $store.state.count }}p>
    <button @click="increment">Incrementbutton>
div>
 
<script>
    // 创建一个 Vuex store
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment(state) {
                state.count++;
            }
        }
    });
 
    var app = new Vue({
        el: '#app',
        store,
        methods: {
            increment() {
                this.$store.commit('increment');
            }
        }
    });
script>

这个示例中，我们创建了一个简单的Vuex store，用于管理一个计数器的状态。

13. 路由守卫

Vue Router提供了路由守卫，允许你在导航到不同路由时执行一些逻辑。以下是一个路由守卫的示例：


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">script>
 
<div id="app">
    <router-link to="/home">Homerouter-link>
    <router-link to="/about">Aboutrouter-link>
 
    <router-view>router-view>
div>
 
<script>
    var app = new Vue({
        el: '#app',
        router: new VueRouter({
            routes: [
                { path: '/home', component: HomeComponent },
                { path: '/about', component: AboutComponent }
            ]
        })
    });
 
    // 全局前置守卫
    app.$router.beforeEach((to, from, next) => {
        // 在导航前执行逻辑
        console.log('Navigating to', to.path);
        next();
    });
 
    var HomeComponent = { template: 'Home Component
' };
    var AboutComponent = { template: 'About Component
' };
script>

这个示例中，我们使用了全局前置守卫，在每次导航前打印日志。

相关阅读:
【kafka】docker + 单点kafka部署 + nodejs生产者和消费者
 【实战详解】如何快速搭建接口自动化测试框架？Python + Requests
Android Qcom Display学习(十一)
Java程序输入、输出、动态数组、列表、类型转换、字符串遍历
 【Verilog刷题篇】硬件工程师从0到入门2|组合逻辑
 oracle 分组合并字段，每组行显示
 Linux基础学习——shell脚本基础：bash脚本编程基础及配置文件
 页面加载动画_渐隐变色旋转小圆圈
 ansible执行mysql脚本
 java计算机毕业设计学习资料校内共享平台MyBatis+系统+LW文档+源码+调试部署
原文地址：https://blog.csdn.net/m0_62110645/article/details/133716026