Vue.js【概述，双向绑定】

最新推荐文章于 2024-04-22 09:07:57 发布

略懂一点的少年

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量167

点赞数 1

分类专栏： # Vue # HTML网页设计文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46964231/article/details/116799448

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML网页设计

3 篇文章 0 订阅

订阅专栏

一，初识Vue.js
1,Vue是JavaScript框架之一
2，Vue的作用：从手动维护HTML，到自动实现HTML DOM的更新操作
3，Vue框架是MVVM设计模式
4，MVVM设计模式
它由三部分组成，分别是Model，View，ViewModel。这种模式可以让View的变化自动更新到ViewModel，而ViewModel的变化也会自动同步到View上面显示

二，Vue的使用
1，Vue的双向数据绑定
Vue可以自动的进行双向数据绑定。比如我修改了视图值，那么模型值也会自动的修改。我修改了模型值，视图值也会自动的修改。
2，绑定方式：
控件的绑定通过控件属性：v-model=“占位符”
标签内容的绑定通过**{{占位符}}**

比如下面这个例子，一般情况下，当我们需要输入一个值的时候就可以绑定控件的属性，你的值会自动的传递给v-model，然后它再传递给VUE中的data里面，data再将结果赋值给{{}}中，反之亦然，这就是双向绑定

3，Vue的实例化
Vue的实例化目的是使用视图和模型，通过构造方法来实现
语法：
new View（{
el：“标签ID”，
data：{
占位符：值
}
}）
el 通过ID，将ID对应的HTML元素变成Vue的挂载目标。就是el挂载元素里面的所有元素都能够被Vue影响到。
data 模型值
项目举例：

<body>
    <div id="app">
        <fieldset>
            <legend>老范，你叫什么名字啊</legend>
            <P>姓：<input type="text" v-model="firstname"></P>
            <P>名：<input type="text" v-model="lastname"></P>
            <p>晚上好：{{firstname+lastname}}</p>
        </fieldset>
    </div>
    <script src="../Vue/vue.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
           firstname:"",
           lastname:""
        }
        });
    </script>
</body>

PS：敲完代码，发现没有效果，但前台后台又都没有报错，那就看一下是否是网页自动翻译成为了中文页面，将它调回英文

三，Vue的访问
1，Vue内部访问data：一般使用this.数据
Vue外部访问data：使用Vue实例对象来访问

ps：console.log()方法的功能是打印，属于JS的打印结果

略懂一点的少年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js【概述，双向绑定】

一，初识Vue.js1,Vue是JavaScript框架2，Vue的作用：从手动维护HTML，到自动实现HTML DOM的更新操作3，Vue框架是MVVM设计模式4，MVVM设计模式它由三部分组成，分别是Model，View，ViewModel。这种模式可以让View的变化自动更新到ViewModel，而ViewModel的变化也会自动同步到View上面显示二，Vue的使用1，Vue的双向数据绑定Vue可以自动的进行双向数据绑定。比如我修改了视图值，那么模型值也会自动的修改。我修改了模型值，
复制链接

扫一扫