1、VueJS框架-day01

VueJS框架-day01

VueJS框架-day01

传统前后分离的模式：

MVC架构：（model-view-controller）

缺点：需要大量的对DOM进行操作（Controller）,写好的数据（model）通过DOM显示在页面上（View），这样大量的对DOM进行操作不利于我们的可维护性。数据都是由服务器写好了的，遍历那些都是服务器做了，这样会影响我们服务器的性能。对DOM的操作也不利于我们代码的复用性。

MVVM架构：（model-view-view、model）

数据和视图绑定在一起了的，数据的解析放在了浏览器，减轻了服务器的负担。不需要大量的操作DOM,大大加深了代码的维护性，还有代码的可复用性。

什么是vue框架？(VM)

是一个View（视图）-Model（模型）之间的桥梁。（VM）对我们的数据和视图进行绑定。

启动一个vue:

需要导包：https://vuejs.org/ https://cn.vuejs.org/
前端架包的引用官网地址：https://www.bootcdn.cn/
创建一个Vue对象
通过el挂载目标元素
通过data渲染挂载元素
通过templace来替换挂载元素

通过methods可以处理绑定的事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">{{ msg }}</div>
    <script>
    new Vue({
        el:"#app",
        data:function(){
            return {
                msg:"<b>hello world</b>"
            }
        },
        template:`
        <div>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        </div>
        `
    });
    
    </script>
</body>
</html>

插值表达式

通过 {{}} 符号来显示渲染的元素

例如：

 <div id="app">{{ msg }}</div>
    <script>
    new Vue({
        el:"#app",
        data:function(){
            return {
                msg:"<b>hello world</b>"
            }
        },
        template:`
        <div>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        </div>
        `
    });

指令系统

常用的指令系统：

指令	解释
v-text	通过该指令可以将数据当成文本渲染到挂载目标元素上
v-html	通过该指令可以将数据中有html的标签解析出来
v-show	通过表达式的Boolean值，如果为true就显示，如果为false就隐藏
v-if/v-else if /v-else	通过表达式的判断当前的是否为true，如果为true就显示，其余的不会添加到html中
v-for	通过v-for="item in list",可以遍历数组，也可以遍历对象
v-click	绑定一个点击事件，可简写为@click=“可以是简单的表达式\|是一个函数”
v-bind	将一个model与视图单向绑定
v-model	将一个model与视图双向绑定，要有value的文本域才起作用

v-if:

    <div id="app">{{ msg }}</div>
    <script>
    new Vue({
        el:"#app",
        data:function(){
            return {
                isShow:false
            }
        },
        template:`
        <div>
        <h1 v-if="isShow">我是标题1</h1>
        <h1 v-else>我是标题2</h1>
        </div>
        `
 
    });

v-for:

  <div id="app">
    <div id="navs">
        <!-- <div v-bind:class="(index==idx?'select':'unselect')"v-for="(itme,idx) in tab" v-on:click="change(idx)">{{itme}}</div>    -->
        <div :class="(index==idx?'select':'unselect')" v-for="(itme,idx) in tab" @click="change(idx)">{{itme}}</div>   
    </div>
    <div id="cons">
        <div v-for="(itme,idx2) in conList" v-if="index==idx2">{{itme}}</div>
    </div>
</div>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return{
                    tab:["tab1","tab2","tab3"],
                    conList:["C1","C2","C3"],
                    index:0,
                    
                }
            },
            methods:{
                change:function(idx){
                    this.index = idx;
                 
                }
            }
        });
    </script>

v-click:

   <div id="app">
        <span>{{count}}</span>
        //绑定的事件
        <button @click="ad">add</button>
    </div>
    <script>
    new Vue({
        el:"#app",
        data:function(){
            return {
                count:0
            }
        },
        //调用事件的Vue的选项
        methods:{
            ad:function(){
                this.count++;
            }
        }
    });
    </script>

双向绑定

v-model指令，只能有value属性的文本域可以，div等不可以使用他。

当model发生变化是，view跟着变化，这就是v-bind的单向绑定。同时当view变化的model也跟着变化，这就是双向绑定。

微博发布的小案例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #app{
            border: 1px #ccc solid;
            width: 500px;
            height: 500px;
            margin: auto;
        }
        ul,li{
            margin: 0%;
            padding: 0%;
            list-style: none;
        }
        #cons h4{
            background: rgb(184, 226, 107);
            padding-left: 50px;
            margin: 0%;
        }
        #cons div{
            background: #ccc;
            padding: 50px;
        }
        #cons button{
            float: right;
            margin: 20px;
        }
    </style>
    <script src="./js/vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
   <div id="public-panel">
       <table>
           <tr>
               <td>发布者：</td>
               <!-- 双向绑定了v-model -->
               <td><input type="text" v-model="sender"></td>
           </tr>
           <tr>
               <td>内容：</td>
               <!-- 双向绑定了v-model -->s
               <td><textarea name="" id="" cols="30" rows="10" v-model="sendCxt"></textarea></td>
           </tr>
           <tr>
               <td></td>
               <!-- 绑定了一个点击事件 -->
               <td><button @click="send">发布</button></td>
           </tr>
       </table>
   </div>
  
    <ul id="cons">
        <li v-for="(msg,index) in msgs">
            <button @click="del(index)">X</button>
            <h4>{{msg.sender}}</h4>
            <div>{{msg.content}}</div>
        </li>
    </ul>
</div>
   <script>
   new Vue({
       el:"#app",
       data:function(){
           return{
               sender:"",
               sendCxt:"",
               //定义一个空数组
               msgs:[]
           }
       },
       methods:{
           send:function(){
            if(this.sender==""||this.sendCxt==""){
                alert("发布的内容不能为空");
                return;
            }
            var msg = {
                "sender":this.sender,
                "content":this.sendCxt
            }
            //将一个对象添加到数组中
            this.msgs.push(msg);
           },
           //删除的点击事件
           del:function(index){
               //alert(this.msgs[index]);
            //    根据索引来删除，需要指定长度
                this.msgs.splice(index,1);
           }
       }
   });
   </script>
</body>
</html>

posted @ 2022-03-10 09:32 站着说话不腰疼阅读(26) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码：从基础到乱码解决
· Open-Sora 2.0 重磅开源！

公告

昵称：站着说话不腰疼
园龄： 4年11个月
粉丝： 5
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

站着说话不腰疼