Vue常用7个属性

最新推荐文章于 2024-07-24 11:11:41 发布

凌波漫步、

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量6.4k

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54495206/article/details/125912477

版权

Vue常用7个属性

学习vue的7个属性，8个方法，以及7个指令。787原则

1、el属性

用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。

2、data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

3、template属性

用来设置模板。会替换页面元素，包括占位符。

4、methods属性

放置页面中的业务逻辑,js方法一般都放置在methods中

5、render属性

创建真正的Virtual Dom

6、computed属性

用来计算

7、watch属性

watch:function(new,old){}
监听data中数据的变化
两个参数。一个返回新值，一个返回旧值

一、基础语法

1、v-bind (用于绑定数据和元素属性)

例如：绑定a标签的href属性

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

2、v-for循环的用法

<div id="app">
<!-- 组件：传递给组件中的值：props -->
<tian v-for="item in items" v-bind:tian="item">

</tian>
</div>

<script type="text/javascript">
//定义一个Vue组件Comment
Vue.component("tian",{
props:['tian'],
template:'<li>{{tian}}</li>'
})
var vm = new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>

3、v-on:click

<div id="app">
<button v-on:click="sayHi()">Me</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"天天"
},
methods:{
//方法必须定义在Vue的Method对象中
sayHi:function(event){
alert(this.message)
}
}
})
</script>

二、Vue双向绑定v-model（表单双绑、组件）

<div id="app">
输入的文本：<input v-model="message" type="text"/>{{message}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
methods:{},
})
</script>

注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值!

<div id="app">
下拉框
<select v-model="selected">
<option value="" disabled="">---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

<span>value:{{selected}}</span>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
selected:""
},
methods:{},
})
</script>

三、Vue组件

<div id="app">
<!-- 组件：传递给组件中的值：props -->
<tian v-for="tiandata in items" v-bind:yin="tiandata"></tian>
</div>
</body>
<script type="text/javascript">
//定义一个Vue组件component
Vue.component("tian",{
props:['yin'],
template:'<li>{{yin}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>

四、axios异步通信

Axios是一个开源的可以用在浏览器端和Node3s的异步通信框架，她的主要作用就是实现 AJAX异步通信，其功能特点如下:

·从浏览器中创建XMLHttpRequests
·从node.js 创建http请求
·支持 Promise APl[JS中链式编程]
·拦截请求和响应
·转换请求数据和响应数据
·取消请求
·自动转换JSON 数据
·客户端支持防御XSRF(跨站请求伪造)

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">

</div>
</body>
<script type="text/javascript">
var obj = new Vue({
el:'#app',
mounted() {//钩子函数 链式编程  ES6新特性
axios.get('data.json').then(response=>(console.log(response.data)));
}
});
</script>

五、计算属性

<div id="app">
currentTime1:{{currentTime1()}}
<br>
currentTime2:{{currentTime2}}
</div>
</body>
<script type="text/javascript">
var obj = new Vue({
el: '#app',
data: {
message: "Hello Vue!"
},
methods: {
currentTime1: function() {
return Date.now(); //返回一个时间戳
}
},
computed: { //计算属性 
//注意：methods，computed 方法名不能重名
//原则上不能重名，重名以后只会调用methods的方法
currentTime2: function() {
return Date.now(); //返回一个时间戳
}}
});
</script>

methods:定义方法，调用方法使用currentTime1()，需要带括号


computed:定义计算属性，调用属性使用currentTime2，不需要带括号; this.message是为了能够让currentTime2观察到数据变化而变化

六、插槽slot

<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems"></todo-items>
</todo>
</div>
</body>
<script type="text/javascript">
//slot:插槽
Vue.component("todo",{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}}</li>'
});
var obj = new Vue({
el:'#app',
data:{
title:"天天列表",
todoItems:['Java',"前端","Linux"]
}
});
</script>