vue页面基本用法

一车鸡蛋

已于 2022-09-14 17:17:04 修改

阅读量633

点赞数

文章标签：前端 vue.js html javascript

于 2022-09-13 16:04:49 首次发布

本文链接：https://blog.csdn.net/Realizee/article/details/126786076

版权

1. 在html页面中引入vue.js

<head>

<meta charSet='utf-8'></meta>

<title> <title/>

<script src='vue.js'></script>

<head/>

2. data数据与页面上显示的{{ }}

<h1 id="demo">{{name}}</h1>

<script>

var app=new Vue({

el:'#demo'

data:{

name:'小明'

}

});

</script>

注： app这个变量会代理vue中的data数据，访问data中的数据时，直接app.name就可以了

若后台修改数据，页面就会自动绑定改变。

3. 操作元素中的纯文本（v-text）

<h1 id="demo" v-text=" '今天是'+ month +'月'+ day+'日' "></h1>

<script>

var app=new Vue({

el:'#demo'

data:{

month: new Date().getMonth()，

day: new Date().getDay()

}

});

</script>

4. 操作元素中的html （ v-html）

<h1 id="demo" v-html=" msg "></h1>

<script>

var app=new Vue({

el:'#demo'

data:{

msg: '< img src="images/羡慕.jpg" /> '

}

});

</script>

5. 绑定页面中的元素属性 (v-bind)

例如：a的href属性，img的src、alt和title属性，控制CSS属性

<div id="demo" v-bind:style="styles" >

<a v-bind:href = "hrefval">

<img v-bind:src = "pictrue" alt = " "/>

        </a>

</div>

<script>

var app=new Vue({

el:'#demo'

data:{

hrefval: ' http://www.wangzhan.cn ',

            pictrue: ' images/羡慕.jpg ',

styles:{

color: ' red ' ,

height: ' 20px '

            }

}

});

</script>

6. 通过判断，是否显示该内容。为true显示/加载，否则隐藏/删除。（v-show、v-if）

<p id="demo" v-show=" seen">哈哈哈哈哈哈</p>

<script>

var app=new Vue({

el:'#demo'

data:{

seen: true

}

});

</script>

7. 条件渲染（v-if、v-else）

<input type="checkbox" v-model="ok" /> 同意否？

<h1 v-if="ok"> 是 </h1>

<h1 v-else> 否 </h1>

注：1. v-else 必须紧跟在v-if 后面，否则他不能被识别。

2. v-if、v-else有更高的切换消耗，安全性更高，而v-show有更多的初始化渲染消耗。因此，若需要频繁切换而对安全性无要求，使用v-show。若运行时，条件不改变，则使用v-if 较好。

8. 控制html元素中的循环（v-for）

<p id="demo">

<li v-for = " (song, index) in songs" >

{{ song.id }} {{ song.name }}

    </li>

</p>

<script>

var app=new Vue({

el:'#demo'

data:{

songs: [

{ id:1, name: ' 《小宇》' }

                { id:2, name: ' 《呼吸决定》' }

                  { id:3, name: ' 《唯一》' }

            ]

}

});

</script>

注： 1. vue2中v-for优先级高于v-if，vue3则v-if优先级高，不管哪个，最好不要把 v-if 和 v-for 同时用在同一个元素上，很耗性能。（每次渲染都循环都判断）。

2. 先判断再循环，可在外层嵌套template（页面渲染不生成template标签的dom节点）在这层 v-if 判断，然后在内部进行 v-for 循环；判断出现在循环的内部，可通过计算属性computed提前过滤掉那些不需要显示的项。

先判断再循环

<template v-if="isShow">
<p v-for="item in items">
</template>

判断出现在循环的内部

<p v-for="item in items">

computed: {
   items: function() {
       return this.list.filter(function (item) {
           return item.isShow
       })
   }
}

9. 对页面中的事件进行绑定( v-on:事件类型=“函数” / @事件类型=“函数”)

<p id="demo">

<li v-on:click = "changes" >点击事件 </li>

<li @adclick = "changes(参数)" >点击事件 </li>

</p>

<script>

var app=new Vue({

el:'#demo'

data:{

},

methods:{

changes:founction(){

console.log();

}

}

});

</script>

10. 双向的数据绑定(v-model)

<p id="demo">

<input v-bind:value= "searchkeys.key" /> //单向

  <input v-model= "searchkeys.key"/ >  //双向

<p>查询的数字为{{searchkeys.key}}</p>

</p>

<script>

var app=new Vue({

el:'#demo'

data:{

                searchkeys：{

keys：'哈哈哈’

                }

},

});

</script>

11. 局部组件

<div id="app">

<Navbar></Navbar>

</div>

<script>

var app=new Vue({

el:'#app',

components:{

//组件名

'Navbar':{

//组件内容

template：'<ul><li>首页</li></ul>'

                }

        }

data:{

},

      methods:{

        }

});

</script>

12. 全局组件（Vue.component(组件名,{方法})）

Vue.component( 'Navbar', {

template：'<ul><li>首页</li><li>其他</li></ul>'

})

<div id="app">

<Navbar></Navbar>

</div>

<script src="components/Navbar.js"></script>

<script>

var app=new Vue({

el:'#app',

});

</script>