0基础学习vue2.x以3.x版本笔记day1

最新推荐文章于 2024-05-15 20:43:52 发布

把柄

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量343

点赞数

文章标签：学习 vue javascript webstorm

本文链接：https://blog.csdn.net/weixin_51319734/article/details/126921144

版权

一、介绍：

我们这先从vue2版本开始介绍，摘自vue2.x官网(介绍 — Vue.js)的一句话,Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。它是由尤雨溪 (Evan You)，前端框架Vue.js 作者，独立开源开发者。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 Java 项目，最后自己也走上了开源之路，现在全职开发和维护 Vue.js。

二、起步

vue的版本：分为俩种一种是生产环境版本，一种是开发环境版本

区别：正如vue官网中提出的当我们安装的环境的版本是生产环境下的版本时他是自带提示报错功能的方便我们去调试代码。从而他的体积会变得跟大。反之，安装开发版本时他是没有这个提示功能的，他的体积更小。

vue的安装呢比较简单，通过查看官网呢提供了我们二种引入方式,但是呢，在安装引入依赖前vue官方建议你安装在使用 Vue 时，在你的浏览器上安装 Vue Devtools（GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.）。它允许你在一个更友好的界面中审查和调试 Vue 应用。根据他提示的文档下载好后安装到谷歌浏览器上就是一下样子。

方式一：通过一下方式直接引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
方式二下载到本地然后在从本地进行引入，一般推荐第二种方式进行引入。
我这里下载的是开发版本方便代码调试。直接在https://v2.cn.vuejs.org/v2/guide/installation.html中单击开发版本进行下载就可以了，
他俩下载出来有个很大的区别：开发版本vue.js生产版本vue.min.js

一、使用插值语法编写第一个程序,hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <!--引入vue环境-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--初始化容器-->
<div id="app">
<!--插值语法 这里也支持写一些什么表达式啊什么的都是可以的-->
    <h1>{{vm.title}}，{{vm.name}}</h1>
</div>

</body>
<script>
    //阻止vue警告！
    Vue.config.productionTip=false;
   const new Vue({
    //指定vue作用域
    el:"#app",
    //指定vue名称
    name:"day1",
    //存储数据 以函数方式进行数据的存储。
    data(){
        return{
            //存储属性
           vm:{
               title:"hello",
               name:"vue",
           },
        }
    }
    })
<!--定义作用域方式二-->
//  vm.$mount("#app");
//el:document.getElementById("app")
//以上的方法都是支持的说白了这个el你可以那任何javascript去引入。
//data的方式2
//data:{存储对象属性或者集合都是可以的}
</script>
</html>

二、vue中的模板语法：

<!DOCTYPE html>
<!--Vue核心 模板语法 数据绑定-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <!--引入依赖-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--初始化容器-->
<div id="app">
    <h2>插值语法</h2>
    <h4>你好{{name}}</h4>
    <hr/>
    <h2>指令语法</h2>
     <!--方式一 v-bind单项数据绑定-->
    <a v-bind:href="tenct.url.toUpperCase()" x="hello">点我去看{{tenct.name}}1</a>
     <!--方式二简写-->
    <a :href="tenct.url" x="hello">点我去看{{tenct.name}}2</a>
</div>
</body>
<script>
//消除vue的告警
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    name:"day2",
    data() {
        return {
            name:"世界",
            tenct:{
                name:"",
                url:"https://www.baidu.com/",
            },

        };
    }
});
</script>
</html>

三、vue中的数据绑定的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--单项绑定 简写法-->
   数据单项绑定: <input type="text" :value="name"/><br/>
    <!--双向绑定-->
   数据双向绑定: <input type="text" v-model="name"/>
</div>
<!--    单项绑定与双向绑定的区别
        （1）单项绑定跟双向绑定的数据源的获取方式不同单项绑定是从data里面return的值获取的，
        双向绑定不仅能从data流向页面也能从页面流向data
        双向绑定适用于表单类型的
        单项绑定使用与数值绑定
-->
</body>
<script>
    Vue.productionTip=false;
    new Vue({
    el:"#app",
        data(){
        return{
            name:"crol",
        }
        }
    });
</script>
</html>

四、vue中的el作用域跟数据绑定的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data二种写法</title>
    <!--引入依赖-->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--创建容器-->
<div id="app">
    <h1>{{name}}</h1>
    <h2>{{name}}</h2><br/>
    <h1>函数式写法</h1>
    <h2>{{name}}</h2>
</div>
</body>
<!--
区别目前那种都合适 但是到了组件的时候推荐函数式写法 因为如果按照第一种写法指向性会有问题
vue.$mount("#app") || el:"#app", 作用是一样的只不过是写法不一样， 跟这个 v-bind  || : 是一样的
-->
<script>
    //移除警告
    Vue.config.productionTip=false;
/*    new Vue({
        el:"#app",
        name:"day4",
        data:{
            name:"hello"
        }
    });*/

    //函数式写法
    let vue = new Vue({
        name:"day4",
        data(){
           return{
               name:"hello"
           }
        }
    });
    vue.$mount("#app")
</script>
</html>

五、Vue核心 MVVM模型数据代理

MVVM模型

M：模型model,说白了就是data中的数据
v:视图view,模板代码
vm:视图模型viewModel vue的实例化对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mvv模型-数据代理</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<!--创建容器-->
<div id="app">
    <h2>{{student.title}}</h2>
    <h2>{{student.addres}}</h2>
</div>
</body>
<script>
    //定义默认值
    let numer=18;
    //数据代理
    let prope={
        name:"小王",
        sex:"男"
    }
//数据代理
    Object.defineProperty(prope,"age",{
       /* value:15,
        //控制属性是否可以枚举
        enumerable:true,
        //控制属性是否被删除
        configurable:true,
        //控制属性是否被修改
        writable:true,*/
        //获取时调用
        get(){
            console.log("读取get属性")
            return numer
        },
        //修改时调用
        set(value){
            numer=value;
            console.log("@ "+value)
        }
    });
//测试方式通过浏览器去修改prope.age的值去观察他的数据代理方式，vue底层也是采用的这种方式.
    console.log(prope)
    Vue.config.productionTip=false;
    let vm = new Vue({
        name:"day5",
        data(){
            return{
                student:{
                    title:"清华大学",
                    addres:"北京",
                }
            }
        }
    });
    //指定作用域
    vm.$mount("#app");
    console.log(vm)
</script>
</html>