Vue的如何使用好代码教程

发布时间：2025-01-06 11:16:26 来源：互联网

.

（1）什么是VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手

（1）什么是VUE

　　是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

（2）模板语法

　　Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

　　数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

　　例子：

<!--模板渲染-->
<div id="app">
    <!--显示 Hello Vue.js!-->
  <p>{{ message }}</p>
</div>

<script>
//启用VUE渲染
var app = new Vue({
  el: '#app',//渲染id为app的标签
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

（3）双向绑定

　　vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

　　在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

　　例子：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'China is the champion!'
  }
})
</script>

效果图：

（4）VUE事件语法

常用事件 v-on，以click为例，所有的v-on都可以简写为@，比如说v-click可以简写为@click

例子：

<div id="app">
        <!-- dianwo是下面定义的方法名 -->
        <button @click="dianwo">aaa</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                
            },
            // 定义方法
            methods: {
                dianwo : function(res){
                    // 点击后在控制台输出"22"
                    console.log("22")
                }
            }  
        })
    </script>