Vue学习01

最新推荐文章于 2024-05-10 15:47:34 发布

123

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量98

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45048086/article/details/120903553

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

框架模式：MVVM
MVVM框架模式

版本简述：

vue3.x的语法和vue2.x写法差不多，可以兼容vue2，其实vue3是推荐TS来进行项目开发，它借鉴了React的函数式编程。

引入vue的方式：

vue资源链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js

方法一：直接在线引用，要求电脑必须联网

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

方法二：本地引用，打开vue资源链接，ctrl+A复制全部内容，在项目里建一个vue.min.js的文件，将复制的内容ctrl+C粘贴进去，保存后，在html里通过script的src属性直接引用。

分析：

在html里引入vue后，通过服务器的方式打开，在控制台输入Vue得到 f Cn(e){this._init(e)}
在这里插入图片描述推出：
e是一个Object（对象）
vue是一个类，所以要使用这个类就必须实例化（new关键字）

new Vue({
    // vue的e里的data属性用于定义数据，以js对象的形式定义
    data:{
	  firstName:"张“，
	  secondName:"三”
    }
});

标签中的数据需要与data中的数据产生关系：view-model => v-model 称为指令，所以vue文件中如果是 v-* 统称为指令。
通过指令绑定一个数据的名字，达到一个数据和视图绑定的功能。
这里数据的名字指的是new Vue 的e里的data属性代表的对象里的键值对的键名。

<input v-model="firstName" type="text"/>
<!-- 添加一个修饰符"." -->
<input v-model.trim="secondName" type="text"/>

可以使用一个绑定文字的指令
v-text : 对应原生的innerText
v-html : 对应原生的innerHTML

<h3 v-text="firstName + ' ' + secondName"></h3>
<h3 v-html="firstName + ' ' + secondName"></h3>

vue里需要绑定这个实例对象里的数据作用域，即当前实例对象应该作用域哪个dom片段

new Vue({
    // vue的e里的el属性用于绑定数据的作用域
    el: '#root',
    // ...
})

注：上述代码表示的是，将这个Vue实例对象的数据作用域绑定给html里id为root的节点，意味着在这个节点下（里）的所有后代节点都可以直接通过 v-* 指令搭配变量名来获取这个Vue实例的data里的数据。

案例一数据的双向绑定

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>

    <div id="root">
        <input type="text" v-model="firstName" placeholder="姓氏">
        <input type="text" v-model="secondName" placeholder="名字">
        <div>
            <h3 v-text="firstName + ' '+ secondName"></h3>
            <h3 v-html="firstName + ' '+ secondName"></h3>
        </div>
    </div>

    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el:"#root",
            data: {
                firstName: "张",
                secondName: "三"
            }
        });
    </script>
</body>

</html>

文件目录为：
在这里插入图片描述
demo地址：https://gitee.com/lyxdgitee/vue-study-demos

123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习01

框架模式：MVVM版本简述：vue3.x的语法和vue2.x写法差不多，可以兼容vue2，其实vue3是推荐TS来进行项目开发，它借鉴了React的函数式编程。引入vue的方式：vue资源链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js方法一：直接在线引用，要求电脑必须联网<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">
复制链接

扫一扫