Vue常用7个属性
Vue常用7个属性。
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)