当前位置：首页 > news >正文

四川省建设人才网官网安卓手机优化软件排名

news 2025/7/20 5:57:30

四川省建设人才网官网,安卓手机优化软件排名,家装网站建设公司,兴文县建设工程网站vue为渐进式框架：vmmv 1.易用有html、css、javascript基础，即可学习vue框架 2.高效、开发前端页面非常高效 1.vue的体积小、压缩完只需要20k的大小 2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快 3.设计时vue底层深度优化 …

vue为渐进式框架：vmmv

1.易用

有html、css、javascript基础，即可学习vue框架

2.高效、开发前端页面非常高效

1.vue的体积小、压缩完只需要20k的大小

2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快

3.设计时vue底层深度优化

3.灵活、开发灵活、多样性

vue的入门开发：

1.下载vue.js并引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

vue对象的基础认识：

vue语法极其严格：

空格、标点符号、语法不正确、极小的语法错误都会导致viem视图无法显示

<body>

<div id="#app">

{{msg}} //vue中mvvm的数据形参写法

        </div>

</body>

<script>

const app = new Vue({

        el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{ //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!",

                username:"hello Vue!",

                pwd :"12345"}

});

</script>

vue中各对象获取参数的写法：

<body>
        <div id="app">

          //对象数据
                <h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}</h4>
                <h4>

                        //数组数据
                        {{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
                </h4>
                <h4>

//集合对象
                        {{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
                        {{users[0].sex}}-- {{users[0].salary}}
                </h4>
                <h4>
                        {{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
                        {{users[1].sex}}-- {{users[1].salary}}
                </h4>
                <h4>
                        {{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
                        {{users[2].sex}}-- {{users[2].salary}}
                </h4>
        </div>
</body>
</html>

<script>
        //创建vue实例
        new Vue({
                el:"#app",
                data:{
                        user:{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
                        hobbies:["吃饭","喝水","睡觉","游山","玩水"],
                        users:[
                                {id:1,name:"cpx",age:20,sex:true,salary:2000.0},
                                {id:2,name:"zhang3",age:22,sex:false,salary:3000.0},
                                {id:3,name:"li4",age:23,sex:true,salary:4000.0},
                        ]
                        }
        })
</script>

v-text和v-html的使用和区别

<div id="#app">

//获取vue对象中key为msg的value

<h3>{{msg}}</h3>

//在标签内获取vue对象中key为msg的value值，直接获取内部文本信息

<h4 v-text="msg"></h4>

//在标签内获取vue对象中key为content的value值，但是如果值中有html标签则可以解析html标签中的信息，输出其中的样式和内容

<h4 v-text="content"></h4>

</div>

vue中的绑定事件

事件的三要素：事件源、事件、监听器

1.事件源：发生特定动作的html

2.事件：发生特定动作单击事件、双击事件、鼠标移出移入等

3.监听器：当标签上发生特定事件时处理的程序一般在js中称为事件处理函数

vue中绑定事件基本语法,事件处理函数的写法

<div id="app">

   //js中事件的写法为：οnclick="method()"，vue中双向绑定的写法为：v-on:事件名 ="function()"，可省略为@事件名v-on:click="clickMethod"等同于@click="clickMethod",且如果方法没有形参列表，可省略扩号

<button v-on:click="clickMethod"></button>

</div>

<script>

const app = new Vue({

        el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{   //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!",

                username:"hello Vue!",

                pwd :"12345",

content:"<h4 stely='color:red'>内容</h4>"

        }，

methods:{

"clickMethod":{ //在methods中定义事件所需要的方法

        }

});

</script>

this的使用

<div id="app">

<h4> {{msg}}</h4>

<button @click="clickMethod">单击事件</button>

         <button @dbclick="dbclickMethod("名字想好了")">双击事件</button>

</div>

<script>

const app = new Vue({

        el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{   //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!"，

username:"名字没想好"

        }，

methods:{

clickMethod(username){ //在methods中定义事件所需要的方法

this.msg="改变后的数据"；//通过this可调用data中双向绑定的数据

this.username=username;

                },

dbclickMethod(username){ //通过this可调用methods中的方法

this.clickMethod(username);

                }

        }

});

</script>

v-show和v-if、v-bind的使用

v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏

v-if 底层通过控制dom树的元素节点实现（增删改查操作）页面元素展示或隐藏

v-show和v-if的选择：

v-show：有更高的初始渲染，通过css样式的display实现隐藏，需要频繁切换，则使用

v-if：有更高的切换消耗，通过删除、添加dom元素，运行时条件很少改变，则使用v-if

v-bind可操作标签中的css样式属性，例：

//v-bind

<img v-bind:width="width" v-bind:height="height" v-bind:src="src" @mouseover="changeImage1" @mouseout="changeImage2"/>

'<script>

//创建vue实例

        let app = new Vue({

                 el:"#app", //用来指定vue实例的作用范围

                data:{//用来给vue实例绑定数据

                        msg:"hello ", //虽然还是写死的路径但是根据双向绑定的原理将来通过修改属性的值改变图片路径

                        src:"images/1.jpg",

                        width:170,

                        height:200

}

})

v-for的使用

v-for遍历对象:

<标签名 v-for="(value,key,index) in vue实例的data属性中的哪个变量"></标签名>

<span v-for="(value,key,index) in user">

{{index}}--{{key}}--{{value}}<br/>

</span>

v-for遍历数组:

标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">

<ul>

         <li v-for="(item,index) in hobbies">{{index+1}}-{{item}}</li>

</ul>

v-for遍历集合:

标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">

<table border="1px" cellspacing="0" width="100%">

         <tr align="center">

                <td>序号</td>

                <td>编号</td>

                <td>名字</td>

                <td>年龄</td>

                <td>工资</td>

                <td>操作</td>

        </tr>

//集合对象的遍历需要:key便于vue内部做重用和排序

        <tr v-for="(user,index) in users" :key="user.id" align="center">

                 <td>{{index+1}}</td>

                 <td>{{user.id}} </td>

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.salary}}</td>

                 <td><a href="">删除</a>|<a href="">修改</a></td>

         </tr>

</table>