Vue进阶学习

Posted 2022-08-22 1999wang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue进阶学习相关的知识，希望对你有一定的参考价值。

　　　　　　　　　　　　　　　　　　　　　　　　　　Vue进阶学组件

1.组件的学习：

　　首先想要使用vue的组件那么需要引入一个支持vue的jsp文件

　　　　　　<script src="node_modules/vue/dist/vue.js">

　　1.model指令的学习　　

　　　　model指令的意思:用于双向绑定且只能用到表单元素当中

　　　　　　试列代码：

<head>
    <meta charset="UTF-8">
    <title>model指令</title>
    <script src="node_modules/vue/dist/vue.js">


    </script>
</head>
<body>
<!--model双向绑定-->
    <div id="app">
        佛曰:<input type="text" v-model="username"/>username<br>

        城市  <br> <input type="checkbox" value="1" v-model="taty"/>成都
             <input type="checkbox" value="2" v-model="taty"/>绵阳
             <input type="checkbox" value="3" v-model="taty"/>江油<br>taty<br>
        性别:sex<br>  <input type="radio" value="1" v-model="sex"/>男
             <input type="radio" value="2" v-model="sex"/>女<br>

        爱好:<select v-model="aihao">
                <option value="1">吃饭</option>
                <option value="2">睡觉</option>
                <option value="3">打豆豆</option>
            </select>aihao<br>

        来自外星球的奥特曼:<br><textarea v-model="introval">
        </textarea>introval

    </div>

    <script>
        new Vue(
            el:"#app",
            data:
                username:"罗将是瓜皮",
                taty:[],
                sex:2,
                aihao:1,
                introval:"我是奥特曼,我来打怪兽"
            

        )

    </script>



</body>
</html>

2.show指令

　　　　show指令的意思：改变一个元素是否显示隐藏

　　　　　　　　试列代码：

<head>
    <meta charset="UTF-8">
    <title>show指令</title>
    <script src="node_modules/vue/dist/vue.js">

    </script>
</head>
<body>


<inpuqt type="button" value="点一点" onclick="hh()"/>
<div id="app" v-show="show">
        <img src="img/1.jpg" width="1000px" height="500px" >

    </div>

    <script>
        let j=new Vue(
            el:"#app",
            data:
                show:false
            ,method:

            
        )
    function hh() 
        j.show =! j.show
    

    </script>



</body>
</html>

　　3.if指令

　　　　　if指令的含义：表示判断如果成立就展示该属性

　　　　　　试列代码：

<head>
    <meta charset="UTF-8">
    <title>if指令</title>
    <script src="node_modules/vue/dist/vue.js">

    </script>
</head>
<body>
    <div id="app" >
        <div v-if="age<22">还不能结婚</div>

        <div v-else-if="age>22 && age<80">太老了 就别想了</div>

        <div v-else="age>80">天人</div>


    </div>
    <script>
        new  Vue(
            el:"#app",
            data:
                age:20
            

        )

    </script>


</body>
</html>

　　　　4.for指令和if判定的一个综合使用：

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="node_modules/vue/dist/vue.js">

    </script>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>状态</th>
        </tr>
        <tr v-for="v in students">
            <td>v.id</td>
            <td>v.name</td>
            <td>v.age</td>
            <td>v.sex?"男":"女"</td>
            <td>
                <span v-if="v.aa==1">优</span>
                <span v-else-if="v.aa==2">良</span>
                <span v-else-if="v.aa==3">差</span>
                <span v-else="v.aa==4">极差</span>
            </td>
        </tr>
    </table>


</div>
<script>
    let v =  new Vue(
        el:‘#app‘,
        data:
            students:[
                id:1,name:"憨憨",age:18,sex:false,aa:1,
                id:2,name:"傻狗",age:19,sex:true,aa:2,
                id:3,name:"憨够",age:18,sex:false,aa:3,
                id:4,name:"二傻子",age:18,sex:true,aa:4
            ]

        

    )


</script>



</body>
</html>

2.事件的学习： on

　　　　什么是on事件：就是平常的绑定事件但是这个是vue提供的所以可以简化来写

　　　　　　原生写法：v-on:click="hh()"

　　　　　　简写：@click="ee()"

　　　　　　　　代码试列：

<head>
    <meta charset="UTF-8">
    <title>on事件</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input  v-on:click="hh()" type="button" value="点我" />
    <input  @click="ee()" type="button" value="再来点我" />
</div>
    <script>
        new Vue(
            el:"#app",
            data:,
            methods:
                hh()
                    alert("叫你点你就点,真鸡儿听话")
                ,
                ee()
                    alert("罗将是瓜皮")
                
            

        )


    </script>





</body>
</html>

3.属性的学习：

　　1.computed计算属性主要用于JS代码中的大量数据计算的时候使用

　　　　列计算当前时间：

<body>

<div id="app">
   formatDate
</div>

<script>

    var v = new Vue(
        el:"#app",
        //属性,一般是写死(从后台读取)
        data:
            bronDate:1566526686736
        ,
        //计算属性
        computed:
            //这里看起来是一个方法，但是使用是当做属性来使用
            formatDate()
                let date = new Date(this.bronDate);
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            
        
    )
    

</script>
</body>

2.watch监控属性：目的监控某个属性一般写死从后台读取试列代码：

<div id="app">
    <input type="text" v-model="msg">
</div>

<script>

    var v = new Vue(
        el:"#app",
        //属性,一般是写死(从后台读取)
        data:
            msg:"郑成功"
        ,
        watch:
            //每次msg属性修改，都会执行这个方法
            /**
             * 第一个参数:新属性(修改后)
             * 第二个参数:旧属性(修改前)
             */
            msg(newVal,oldVal)
                console.debug(newVal,oldVal)
            
        
    )
    

</script>
</body>

3.组件的学习

　　组件template标签：切这两个表片都可以定义组件模板 template标签放在挂钩容器中将会显示该模板的样式

　　组件script标签：script则不会显示模板的样式

　　自定义组件：什么是自定义组件就是自己定义组件切给与你所需要的属性的组件：

　　　　代码走你：

<head>
<meta charset="UTF-8">
<title>自定义组件抽取</title>
<title>Title</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>

</div>
<script>
//全局抽取
const b = "<h1>抽取</h1>";

const a =
template:b

Vue.component("mycomponent",a)

new Vue(
el:"#app"
)

</script>

</body>

4.路由的学习:

　　路由是vue支持的但是需要引入插件：命令 npm install vue-router 当然有了插件需要引用才会有效果需要先引入支持vur的插件在引用路由的插件<script src="node_modules/vue-router/dist/vue-router.js"></script>

　　试列代码：

<body>
<div id="app">
        <p>
        <router-link to="/student">风景</router-link>
        <router-link to="/teacher">洗手间景</router-link>
        <router-link to="/school">人景</router-link>
        </p>
    <!--路由出口必须在挂载容器里面-->
    <router-view></router-view>
    </div>

<script>
    const aa = ‘<div><img src="img/1.jpg" width="400px" height="400px"> </div>‘
    const bb = ‘<div><img src="img/4.jpg" width="400px" height="400px"></div>‘
    const cc = ‘<div><img src="img/5.jpg" width="400px" height="400px"></div>‘

    const aaa =  template:aa
    const bbb =  template:bb 
    const ccc =  template: cc

    const q = new VueRouter(
        routes

    )

    const s = ‘/student‘
    const t =  ‘/teacher‘
    const sc =  ‘/school‘

    const routes = [

         path:s , component: aaa,
         path:t, component: bbb ,
         path:sc, component:  ccc

    ]

    new Vue(
        el:"#app",
        router:q

    )



</script>

</body>

5.VueClt学习：vue提供脚手架快速搭建web工程模板

　　　　1.准备模块

　　　　2.使用dos命令进去该模块层

　　　 3.输入命令进行初始化 vue init webpack : 初始化

　　　　4.初始化完成过后直接启动 npm run dev : 直接运行

　　　　第一个选择yes一路回车到vue-pouter：是否引用路由选择yes其余全部no

以上是关于Vue进阶学习的主要内容，如果未能解决你的问题，请参考以下文章

vue学习-进阶

Vue学习笔记进阶篇——过渡状态

Vue学习笔记进阶篇——列表过渡及其他

Vue学习笔记进阶篇——多元素及多组件过渡

vue进阶学习01

Blazor和Vue对比学习（进阶2.2.1）：状态管理概述