Vue简单入门

最新推荐文章于 2023-10-16 12:32:14 发布
最新推荐文章于 2023-10-16 12:32:14 发布
阅读量521 收藏 3
点赞数
分类专栏： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45415977/article/details/100026293
版权
这篇博客介绍了Vue.js的基础知识，包括Node.js和Npm的安装、ECMAScript6的简要介绍，深入讲解Vue的入门、组件、指令等特性。同时，详细阐述了Webpack的打包概念和配置，包括安装、命令、CSS加载和热更新服务器的设置。最后提到了Vue CLI的作用和快速上手指南，帮助开发者更高效地搭建Vue项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Nodejs&Npm安装

node自带npm（安装了node也就有npm了）

1 官方网站查找下载 https://nodejs.org/en/download/,下载后直接傻瓜安装就行了.
安装后测试

2 确定环境变量中是否有nodejs的配置
输入命令 node -v ：查看node的版本
输入命令 npm -v : 查看npm的版本
只要能查到就说嘛安装成功了.

3 idea中的npm安装
在这里插入图片描述
如果网不好,下载不了就去网站下载,然后离线安装

4 安装后重启idea 在idea下方的Teminal即可输入命令
在这里插入图片描述
这就代表安装好了

2 先创建一个普通web项目

在这里插入图片描述

1 命令
1 初始化命令
npm init ->初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)
npm init -y ->初始化(跳转确定信息)
在这里插入图片描述

2 安装命令
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(安装项目可以使用)
npm install/i vue
在这里插入图片描述

3.ECMAScript6

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范
ES6就是现在最新的JS语法
后期更多使用年号来做版本(ES2017,ES2018,…)

1 es6常用语法

** 1 let&const**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        *  //let也是定义变量的,它和我们Java的变量的规范更相似
        *   var其实不是很规范
        * */
       /* for (var i = 0; i < 5; i++) {
            //console.debug(i)
        }*/
       //在for循环外面 也可以获取到里面i的值
        //console.debug(i)
        var a = 1;
        var a = 2;
        console.debug(a);
      console.debug("------------------------------------------------")
        //let 属性就不一样了 更倾向于我们java中的 定义变量
        for (let i = 0; i < 5; i++) {
            console.debug(i)
        }
        //console.debug(i)
        //定义常量 不可修改 必须赋值
        const value = 111;
        // const value = 1;
        console.debug(value);

    </script>
</head>
<body>
    
</body>
</html>

2 解构表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //解构变量赋值
        //以前变量赋值
       /* let a = "你是谁";
        let b = "你是条狗";
        let c = "你是哈比";
        console.debug(a,b,c);*/

        //解构表达氏 赋值
        /*let [a,b,c] = ["dd","aa","cc"];
        console.debug(a,b,c)*/

        // 数组解构
        let arr = [1,2,3];
        let [a,b,c] = arr;
        console.debug(arr);
        console.debug(a,b,c);

        //对象解构
        let person = {id:1,name:"小花"}
        let {id,name} = person;
        console.debug(id,name)
    </script>
</head>
<body>

</body>
</html>

3 箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*案例一 : 原生函数与箭头函数
        箭头函数中，小括号是参数，大括号是函数体
        如果函数体只有一句，大括号可以省略*/
        //普通函数
        function say() {
            console.debug(111)
        }
        say();
        //定义箭头函数
        //也可以写成: var hi=()=>console.debug("我是一个中国人...");
   /*     var he = ()=>console.debug(22);
        he();
        var hi = ()=>{
            console.debug(33);

        }
        hi();
*/
        //案例二 : 带参数的函数
        //小括号中是传参，大括号中是函数体
     /*   function hello(name) {
            console.debug(name);
        }
        hello("阿达打");

        var hello1 = name => console.debug(name)
        hello1("哈哈哈");
*/
        //案例三 : 对象中添加相应的参数
   /*     var person = {
            //ES5的写法
            say1:function (name) {
                console.debug(name)
            },
            //使用箭头函数的写法
            say2:(name)=>{
                console.debug(name)
            },
            //最简写法 -> 当时是我最喜欢的写法啦
            say3(name){
                console.debug(name)
            }
        }

        person.say1("11111");
        person.say2("22222");
        person.say3("33333");
*/

        //案例三 : 解构与箭头函数的混用
        const person = {
            name:"花花",
            age:14
        }
        //传统方案
       /* function to(person) {
            console.debug(person)
        }
        to(person.name);*/

        //解构+箭头方案
        // 这个地方小括号代表接收参数，小括号中的大括号就代表对传过来的对象进行解构
        var tu = ({name})=> {console.debug(name)}

        tu(person);


    </script>
</head>
<body>

</body>
</html>

4 Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*异步编程的解决方案(比传统的解决方案更加强大)
        Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件
        我们可以在Promise中封装一个异步请求的结果
        注:以后咱们会使用axios(更加的简单啦)，它是对Promise的底层的封装，
        大家可以先简单就是咱们原生Ajax与JQuery封装后的区别*/
        var promise = new Promise(function (resolve, reject) {
            setTimeout(()=>{
                let time = Math.random();
                if (time>0.5){
                    resolve("成功了...")
                }else {
                    reject("失败了...")
                }
            },3000)
        });
        //成功执行then中的代码，失败执行catch中的代码
        promise.then(function (msg) {
            console.debug(msg)
        }).catch(function (err) {
            console.debug(err);
        })

    </script>
</head>
<body>

</body>
</html>

4 Vue入门

1 什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API - - - 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
Vue的特点

轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
Vue的历史

Vue是比较新的技术，版本 1.0 是在 2014 年发布的, Vue作者是前Google 的员工尤雨溪, 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。 Vue对比其他框架:https://cn.vuejs.org/v2/guide/comparison.html#ad

1 el,data与method 三部曲
引入Vue.js
准备被挂载的元素
JS完成挂载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1 导包 引入支持-->
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--2 创建 vue容器-->
    <div id="app">
        {{massage}}
    </div>
    <!--3 找到vue的容器-->
    <script>
        new Vue({
            el:"#app",
            data:{
                massage:'hello.vue.js'
            }
        })
    </script>
</body>
</html>

** 1 el 和 data**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1 导包 引入支持-->
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--
    el:
    el是用于完成挂载功能
    挂载可以使用id,class,标签
    不管使用哪些方式，都只能挂载一个
    建议使用id进行挂载、
    只要挂载成功的元素，才能使用vue的功能(表达式等)
    
    data:
    data是咱们的数据,获取数据有两种方式
    直接在js中获取/设计, 在表达式中来获取
    -->

<!--2 创建 vue容器-->
<div id="app">
    {{massage}}
    {{sex}} <br/>
    {{employee}}---{{employee.name}}---{{employee.age}}<br/>
    {{hobbys}}---{{hobbys[0]}}
</div>

<!--3 找到vue的容器-->
<script>
    new Vue({
        el:"#app",
        data:{
            massage:'hello.vue.js',
            sex:true,
            employee:{
                name:"haha",
                age:16
            },
            hobbys:['吃饭','睡觉','敲代码']
        },
    })
</script>
</body>
</html>

methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--指的是咱们的方法元素
    调用方法的位置
    在js中直接调用
    可以用表达式调用
    可以直接使用this获取到data中的数据
    -->
<div id="app">
    {{massage}}
    {{say()}}
    {{hello('原来是这样')}}
</div>

<!--3 找到vue的容器-->
<script>
    var vue=new Vue({
        el:"#app",
        data:{
            name:'天下第一',
            massage:'hello.vue.js',
        },
        methods:{
            say(){
                //alert(111)
            },
            hello(msg){
                // 直接在方法中拿到咱们data中的数据
                console.debug(this.name+msg)
                this.name = '不知道';
            }
        }
    });
    vue.hello(11);

</script>

</body>
</html>

2 vue的钩子方法

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程
创建实例
装载模板
渲染模板
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）
created与mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>

<script>
    var vue = new Vue({
        el:'#app',
        data:{
            msg:'第一次很痛的'
        },
        //在模板渲染成html前调用
        //钩子方法:vue内部执行完后执行
        created(){
            alert(1)
            this.msg='真的吗'
        },
        //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        //挂载完成后执行
        mounted() {
            alert(2)
            this.msg='不事真的'
        }

    });

</script>
</body>
</html>

3 vue的表达式
Vue的表达式中写代码和js是一样的
可以使用四则运算符
可以使用三目运算符
字符串,对象,数组都可以直接操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}} ， {{2+2}} {{4*6}} <br/>
    {{num2-num1}}  <br/>
    {{msg.length}} <br />
    <!-- null,undefined,"",0,false,NaN 都是假 其余都是真-->
    {{sex?"男":"女"}}
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"天使",
            num1:10,
            num2:20,
            sex:false
        }
    })
</script>
</body>

</body>
</html>

4 vue重要指令
在这里插入图片描述
** 5 v-html与v-text**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">
    <span id="myspan">{{msg}}</span>
    <!--
        使用指令写法来设置数据
        注:指令中获取数据，不需要写表达式{{}}
    -->
    <span v-html="msg"></span>
    <span v-text="msg"></span>
</div>

<!--
    指令:vue设计的一种特殊的标签，v-指令名称
-->
<script>

    //原生的js代表为这个myspan加数据
    /**
     * innerText:会把加上的内容原样输出(不会当作html标签进行识别与编译)
     * innerHTML：会去识别与编译咱们的html标签
     */
    /*
    document.getElementById("myspan").innerHTML = "<h1>喔为...</h1>";
    document.getElementById("myspan2").innerText = "<h1>喔为...</h1>";
    */
    new Vue({
        el:"#app",
        data:{
            msg:"<h1>喔为...</h1>"
        }
    })

</script>

</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
    4.2 v-for
    遍历咱们的数据(数字,字符串,对象,集合)
    数字就是普通的循环 for(var i=1;i<=数字;i++)
    字符串是拿到每一个字母
    对象循环 <span v-for="(v,k,i) in 对象"></span>
    v:代表对象的属性值
    k:代表对象的属性名
    i:代表索引
    数组循环 <span v-for="(v,i) in 数组"></span>
    v:代表对象的属性值
    i:代表索引

-->
<div id="app">
    <!--遍历字符串-->
    <div v-for="value in name ">{{value}}</div>
    <!--遍历数字 跟java for i  -->
    <div v-for="i in num ">{{i}}</div>
    <!--无序列表：遍历数组  item:每次遍历的值  index:遍历的下标 -->
    <div v-for="(item,index) in hobbys"> {{index}} - {{item}}</div>
    <!-- 遍历对象    val:代表遍历的值 name:属性名  index:位置  -->
    <div v-for="(val,name,index) in employee">{{name}}：{{val}}</div>
    <!--<div v-for="(val, name, index) in employee">{{name}}：{{val}}</div>-->
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:"真好啊天气",
            num:10,
            hobbys:["薇妹最美","未来就是未来","好奇宝宝"],
            employee:{
                name:"薇薇",
                age:11,
                sex:false
            }
        }
    })
</script>
</body>
</html>

v-bind的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
    标准写法-> v-bind:属性名
        v-bind:src -> 绑定相应的属性(里面的值可以从data中获取)
    简写形式-> :属性名
    多个属性绑定
        v-bind="对象"
-->
<div id="app">
   <!-- bind:用于绑定相应的属性-->
    <img v-bind:src="imgUrl"  v-bind:height="height" />
    <!--简写 -->
    <img :src="imgUrl"  :height="height" />
    <!--一次把对象的属性全部绑定过来 -->
    <img v-bind="img" />
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            imgUrl:"../img/111.jpg",
            width:200,
            height:400,
            img:{
                src:"../img/111.jpg",
                width:200,
            }
        }
    })
</script>
</body>
</html>

for与bind 的下拉框事件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
  下拉框的值
-->
<div id="app">
    <select >
        <option v-for="val in address" v-bind:value="val.id">{{val.name}}</option>
    </select>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
          address:[
              {id:1,name:'小花'},
              {id:2,name:'小请'},
              {id:3,name:'小三'},
          ]
        }
    })
</script>
</body>
</html>

v-model

主要是用于完成双向的绑定
只能用于:input,select,textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputval"> 输入 <br/>
    <hr>
    爱好
    <b>{{checkboxVal}}</b>
    <input type="checkbox" value="1" v-model="checkboxVal"> 电影
    <input type="checkbox" value="2" v-model="checkboxVal"> 动漫
    <input type="checkbox" value="3" v-model="checkboxVal"> 户外
    <input type="checkbox" value="4" v-model="checkboxVal"> 动作

    <hr>
    <b>{{radioVal}}</b>
    <input type="radio" value="1" v-model="radioVal"> 男
    <input type="radio" value="2" v-model="radioVal"> 女
    <input type="radio" value="3" v-model="radioVal"> 保密

    <hr>
    <b>{{selectVal}}</b>
    <!--这里的 selectVal 要写在 select标签上-->
    <select v-model="selectVal">
        <option  value="1">百度</option>
        <option  value="2">淘宝</option>
        <option  value="3">京东</option>
    </select>
    <hr>
    <b>{{textareaVal}}</b>
    <textarea v-model="textareaVal"></textarea>
</div>


<script>
    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    new Vue({
        el:"#app",
        data:{
            inputval:"这是什么鬼",
            checkboxVal:[],
            radioVal:2,
            selectVal:3,
            textareaVal:"天下第一妹  "
        }
    })
</script>
</body>
</html>

v-show
v-show用于展示和隐藏 <标签 v-show=“true/false”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button onclick="showTime()">点一下</button>

    <img src="../img/111.jpg" v-show="isShow">
</div>


<script>
    let vue = new Vue({
        el:"#app",
        data:{
            isShow:false
        }
    });
    function showTime() {
        vue.isShow = !vue.isShow
    }
</script>
</body>
</html>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="age<18">
        未成年
    </div>
    <div v-else-if="age>=18 && age< 30">
        青年
    </div>
    <div v-else-if="age>30">
        死了
    </div>


</div>


<script>
    let vue = new Vue({
        el:"#app",
        data:{
            age:22
        }
    });

</script>
</body>
</html>

** v-on 事件绑定**
事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<!--
    事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
    调用的方法可以不加()
    v-on有一种简写形式 <标签 @事件名=方法名>
-->
<body>
<div id="app">
    <!--标准写法-->
    <button v-on:click="say()">点点点</button>
    <!--简写-->
    <button @click="say">点点点</button>

    <button @click="hello('是谁在那里')">点点点</button>
    <!--点一次就增加一次-->
    <button @click="age++">{{age}}</button>
</div>


<script>
    let vue = new Vue({
        el:"#app",
        data:{
            name:"小明",
            age:12
        },
        methods:{
            say() {
                alert("看什么看")
            },
            hello(msg) {
                console.debug(msg+this.name)
            }
        }
    });

</script>
</body>
</html>

计算：computed
如果一个值需要大量计算展示，建议使用计算属性先计算完毕再直接使用
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    {{birth}}
</div>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            bronDate:1529032123201 //时间毫秒值
        },
        //有大量计算的时候 可以用computed
        computed:{
            // 计算属性本质是一个方法，但是必须返回结果
           birth(){
                let date = new Date(this.bronDate);
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
           }
        }
    });

</script>
</body>
</html>

watch监控属性
watch可以让我们监控一个值的变化。从而做出相应的反应。
比如咱们监听一个文本框中的变化，然后进行相应的高级查询(百度搜索)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <input type="text" v-model="msg" />
</div>
<!--watch可以让我们监控一个值的变化。从而做出相应的反应。-->
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            msg:"xxx"
        },
        watch:{
            //两个值 一个是修改后的值,一个是修改之前的值
            msg(val,val1){
                console.debug(val,val1)
            }
        }

    });

</script>
</body>
</html>

5 组件

自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签

全局组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <mytag></mytag>
</div>
<!--定义一个app1，里面有咱们的自定义标签-->
<div id="app1">
    <mytag></mytag>
</div>

<script>
    //让Vue为咱们注册一个组件，这个组件的名称就叫mytag
    /**
     * 全局组件:只要Vue挂载的容器都可以使用
     * 第一个参数就是组件的名称
     * 第二个参数就是这个组件的一些具体的配置
     *      `template:模板(就是对应的html代码)
     *        模板中有一个要求:有且只有一个外部标签
     *         myTag(驼峰命名) 使用的时候得用-（my-tag）
     */
    Vue.component("mytag",{
        //记住:这里有且只能有一个外部标签
        template:"<div><h1>你是谁</h1><h2>我是谁</h2></div>"
    })
    //页面的两个容器都进行了挂载
    new Vue({
        el:"#app"
    })

    new Vue({
        el:"#app1",
    });
</script>
</body>
</html>

局部组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <mytag></mytag>
</div>
<!--定义一个app1，里面有咱们的自定义标签-->
<div id="app1">
    <mytag></mytag>
</div>
<script>
    //让Vue为咱们注册一个组件，这个组件的名称就叫mytag
    /**
     * 全局组件:只要Vue挂载的容器都可以使用
     * 第一个参数就是组件的名称
     * 第二个参数就是这个组件的一些具体的配置
     *      `template:模板(就是对应的html代码)
     *        模板中有一个要求:有且只有一个外部标签
     *         myTag(驼峰命名) 使用的时候得用-（my-tag）
     */

    //页面的两个容器都进行了挂载
    new Vue({
        el:"#app",
        components:{
            //mytag就是组件的名称
            mytag:{
                template:"<h1>AAAAA</h1>"
            }
        }
    });

    new Vue({
        el:"#app1",
    });
</script>
</body>
</html>

6 组件模块

3.1 template标签模板

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <mytag></mytag>
</div>
<!--准备模板数据，如果这个模板放到挂载元素中，就会直接显示-->
<!--如果直接放到 Vue容器里面也会直接显示出来 现在的模板是隐形的 页面不显示-->
<template id ="mytemp">
    <form>
        <input type="text">用户名
    </form>
</template>
<script>

    //定义组件中显示的数据
    let tempconfig = {template:"#mytemp"};
    //定义组件的配置
    //let template = {  template:tempconfig }
    //注册组件
    Vue.component("mytag",tempconfig)

    new Vue({
        el:"#app",
    });

</script>
</body>
</html>

3.2 script标签模板

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <mytag></mytag>
</div>
<!--
    使用script标签(里面的内容是不会显示在页面的)
     type="text/template":知道这里面的代码是模板（里面内容不会显示）
-->
<script id ="mytemp" type="text/template">
    <form>
        <input type="text">用户名
    </form>
</script>
<script>

    //定义组件中显示的数据
    let tempconfig = {template:"#mytemp"};
    //定义组件的配置
    //let template = {  template:tempconfig }
    //注册组件
    Vue.component("mytag",tempconfig)

    new Vue({
        el:"#app",
    });

</script>
</body>
</html>

3. vue的data与methods

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <mytag></mytag>
</div>
<!--
    使用script标签(里面的内容是不会显示在页面的)
     type="text/template":知道这里面的代码是模板（里面内容不会显示）
-->
<script id ="mytemp" type="text/template">
    <form method="post">
        <input type="text">{{username}} <br/>
        <input type="password">密码 <br/>
        <input type="button" @click="login" value="提交">
    </form>
</script>
<script>

    //定义组件中显示的数据
    let tempconfig = {
        //直接引用模板的的值
        template:"#mytemp",
        //这个data应该是一个方法，返回相应的数据
        data(){
            return{
                username:"用户名称"
            }
        },
        methods:{
            login(message){
                console.debug(message)
            }
        }
    };
    //定义组件的配置
    //let template = {  template:tempconfig }
    //注册组件
    Vue.component("mytag",tempconfig)
    new Vue({
        el:"#app",
    });

</script>
</body>
</html>

7 路由

路由是一个插件，需要单独引入
输入命令：npm install vue-router

入门

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <h1>我是一个路由!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/fan">番剧</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/dance">舞蹈</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<!--
    使用script标签(里面的内容是不会显示在页面的)
     type="text/template":知道这里面的代码是模板（里面内容不会显示）
-->

<script>
    //创建一个路由对象
    let router = new VueRouter({
        routes:[
            {
                path:"/",
                component:{
                    template:"<h1>我手机是说的</h1>"
                }
            },
            {
                path:"/fan",
                component:{
                    template:"<div>番剧</div>"
                }
            },
            {
                path:"/movie",
                component:{
                    template:"<div>电影</div>"
                }
            },
            {
                path:"/dance",
                component:{
                    template:"<div>舞蹈</div>"
                }
            },
        ]
    });

    new Vue({
        el:"#app",
        router
    });

</script>
</body>
</html>

路由拆解

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<!--
自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签
-->

<body>
<!--定义一个app，里面有咱们的自定义标签-->
<div id="app">
    <h1>我是一个路由!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/fan">番剧</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/dance">舞蹈</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<!--
    使用script标签(里面的内容是不会显示在页面的)
     type="text/template":知道这里面的代码是模板（里面内容不会显示）
-->

<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const index = { template:"<h1>亲来啦</h1>"}
    const fan = { template:"<h1>一起看番了</h1>"}
    const movie = { template:"<h1>看看电影</h1>"}
    const dance = { template:"<h1>跳跳舞</h1>"}

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        { path:"/",  component:index },
        { path:"/fan", component:fan },
        { path:"/movie", component:movie },
        { path:"/dance",  component:dance },
    ]

    //创建一个路由对象
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    let router = new VueRouter({
        //这里（缩写）相当于 routes: routes
        routes
    });
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    new Vue({
        el:"#app",
        router
    });

</script>
</body>
</html>

8.webpack打包【了解】

https://www.webpackjs.com/

8.1.1 打包认识

  • 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆，提高代码的安全性。

8.1.2 webpack认识

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静
态文件，减少了页面的请求。 接下来我们简单为大家介绍 Webpack 的安装与使用

[外链图片转存失败(img-6lucRePu-1566635780704)(4F31119C637C4959B9F6C99BF01BF656)]

8.2 安装webpack

这里咋个选择全局安装，后面好进行使用

本地安装：

npm install webpack --save-dev
npm install webpack-cli --save-dev

全局安装：(选这个安装)

由于网络问题，安装的时间可能会比较长，甚至会失败，大家可以多方式 几次

npm install -g webpack 
npm install -g webpack-cli

8.3 准备工作

8.3.1 新建一个module项目

[外链图片转存失败(img-S9HEAAuD-1566635780742)(DDAB4959FEF84334B15747FBF69138DA)]

8.3.2 初始化项目

  • 进入webpacktest中
  • 输入命令 npm init -y

[外链图片转存失败(img-bC8JRpYO-1566635780743)(7B0168E815EB423EAD089F48AB9584B0)]

8.3.3 准备相应的模块

  • a.js
var a= "a模块";
//这里相当于引入了b.js的文件
var b = require("b.js");
console.debug(a,b);
  • b.js
//定义进行返回，可返回任何数据
define(function(){
    var b ="b模块";
    return b;
})
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入a的js文件-->
    <script src="js/a.js"></script>
</head>
<body>
</body>
</html>

[外链图片转存失败(img-gCNxiUOx-1566635780743)(462404C8B9344A7A8F7D331EB24CFB6F)]

由于现在浏览器还有很多新语法不支持，所以这里运行一般都会出错

8.4 打包命令

  1. 输入打包命令 webpack src/a.js -o dist/bundle.js

在这里插入图片描述

  1. 修改js引入
<!--引入a的js文件-->
<script src="dist/bundle.js"></script>
  1. js配置文件打包
  • webpack.config.js，该文件与项目根处于同级目录
//提供好的一个模块，不用管它，这里要求必需使用这个模块
var path = require("path");
//
module.exports = {
    entry: './src/main.js',
    output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
    }
}

8.5 CSS加载

  • 默认打包只会打包js
  • 如果需要打包其它资源文件,都是需要单独下载相应的加载器的

[外链图片转存失败(img-JfyY72am-1566635780746)(7FFDAE7026B44983915E359775316D7F)]

8.5.1 加载器安装

npm install style-loader --save-dev
npm install css-loader --save-dev

8.5.2 a.js引入相当css

var a= "a模块";
//这里相当于引入了b.js的文件
var b = require("./b.js");
console.debug(a,b);
require("../css/index.css");

8.5.3 webpack.config.js

var path = require("path");
//对于模块的一个输出
module.exports = {
   ...
    //配置对应的打包器
    module: {
        rules: [
            //配置的是css的支持，style:样式解析器  css:样式加载器
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

8.6 热更新web服务器

  • 每次修改都重新打包太麻烦
  • webpack给我们提供了一个插件，运行web服务，加载最新结果

8.6.1 安装插件

npm install webpack-dev-server --save-dev

8.6.2 添加启动脚本

  • 在package.json中配置script
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --progress --config ./webpack.conf.js"
  }
  • –inline：自动刷新
  • –hot：热加载
  • –port：指定端口
  • –open：自动在默认浏览器打开
  • –host：可以指定服务器的ip，不指定则为127.0.0.1

9.vue_cli(脚手架)

  • 官网：https://github.com/vuejs/vue-cli

9.1 为什么要使用vue_cli

  • 在开发中，需要打包的文件很多(html,css,js,图片,…)
  • vue提供脚手架快速搭建web工程模板
  • 全局安排命令(以后很多项目都会使用)：npm install -g vue-cli

9.2 vue_cli快速上手

  1. 新建模块

[外链图片转存失败(img-aAovs1V0-1566635780746)(F20540CA206E493990611F7A1A91B46E)]

  1. 进入目录
D:\code\ideawork\vue-02>cd 02vueclitest

D:\code\ideawork\vue-02\02vueclitest>
  1. 创建webpack项目
  • 命令: vue init webpack : 初始化
  • 命令: npm run dev : 直接运行

[外链图片转存失败(img-Plqbyfux-1566635780747)(01C2F6048F824FE2BB43A91CA31EB791)]

[外链图片转存失败(img-3d7LX558-1566635780747)(9C2F907B52384617AA07F8856F6E9805)]

[外链图片转存失败(img-wc96nLHH-1566635780747)(4D2B8D72E97040649C945C4B4CBDEE3C)]

在这里插入图片描述
在这里插入图片描述

  • npm run build 打包可以在服务器运行
Vue 基础入门
我的的博客哦
05-17 2万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue超简单入门
qq_44769099的博客
02-24 700
目录 概念 安装 实例化 内置指令 文本渲染 {{}} 语法 v-text与v-html 文本 属性渲染 v-bind 属性 条件渲染 v-if,v-else 选择 v-else-if 多重选择 v-show 显示隐藏 ...
vue 简单入门
wx1762813417的博客
09-15 277
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 2.库和框架的区别 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框...
vue简单入门介绍
liuerchong的博客
07-24 395
0.前言 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 ajax盛行： 2005年开始，ajax逐渐
Vue简单入门及案例
qq_54605990的博客
04-27 1893
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
Vue简单入门.pdf
03-24
Vue.js 是一款流行的前端开发框架，以其简单、精确和快速上手的特点被广泛采用。它是一种渐进式框架，特别适合构建数据驱动的web界面。Vue.js 的设计目标是通过简洁的API实现响应式的数据绑定和组件组合，使得开发者...
vue简单入门.pptx
06-16
### Vue.js 简单入门知识点详解 #### 一、Vue.js 概述 - **定义**：Vue.js 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手...
VUE的简单入门
walker_0312的博客
06-30 208
VUE Vue介绍 Vue 是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。 特点: 易用：在有 HTML CSS JavaScript 的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。 Vue快速入门 下载和引入 vue.js 文件。 编写入门程序。 视图：负
Vue的简单入门使用
兵马未动，粮草先行。。。的博客
06-25 285
一、Vue的安装和使用（idea） vue是个前端框架。 1.安装Node NPM（node package manage）是Node提供的模块管理工具，可以非常方便的下载安装很多的前端框架，包括jquery，AngularJS，VueJs都有，我们需要先安装node及NPM工具。 下载地址：https://nodejs.org/en/download/（nodes自带NPM） 2.安装vue 下...
Vue（一） 简单语法入门
这里是阿安的博客
09-13 663
Vue是一个基于JavaScript的渐进式前端开发框架，类似于jQuey，但是Vue提供了更加易用、高效、灵活的开发方式，让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定，掀起了前后端分离的热潮。
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 3万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue.js超简单入门教学
百味杂谈
06-04 908
如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。 Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。 准备工作 首先，...
vue简单入门介绍part1
MichaelJY1991的专栏
04-29 314
vue vue简单来说是一款开源的Javascript前端框架，可以快速开发响应式前端，简化了web前端开发。 特征 虚拟DOM（Virtual DOM） vue使用虚拟DOM（React、Ember等前端框架也采用），它不会修改原有的DOM，而是复制一份DOM作为虚拟DOM。 每次改变都会比较真实DOM和虚拟DOM，发生变化才会应用到真实DOM。 数据绑定（Data Binding） ...
vue简单入门的项目
最新发布
01-31
Vue.js 是一款简单易学的前端框架，下面我将用300字详细介绍如何进行Vue简单入门项目。 首先，你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI，使用以下命令： npm install -g @vue/cli 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值