vue.js初使用
2018-08-04 本文已影响0人
淡若s清茶
vue.js使用
vue.js煊染
- 最小应用
<p id="pid">{{msg}}</p>
var pid=new Vue({
el:'#pid',
data:{
msg:new Date().toLocaleString()
}
})
- v-bind “将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”
<div id="app">
<span v-bind:title="message">
时间
</span>
</div>
var pid=new Vue({
el:'#pid',
data:{
msg:new Date().toLocaleString()
}
})
- 如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
- v-if
<p id="pid2" v-if="show">你看见我了</p>
var pid2=new Vue({
el:"#pid2",
data:{
show:false
}
})
- v-for
var forid=new Vue({
el:"#forid",
data:{
lines:[
{text:"我草"},
{text:"你草"},
{text:"他草"},
{text:"她草"},
]
}
})
<div id="forid">
<ul>
<li v-for="line in lines">
{{line.text}}
</li>
</ul>
</div>
- 在控制台里，输入 forid.lines.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
7.v-model双向绑定
<div id="id6">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
var id6=new Vue({
el:"#id6",
data:{
msg:" "
}
})
vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js试用</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
</body>
</html>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
vue具体学习
1.数据类
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a == data.a // => true
vm.a = 2
data.a // => 2
data.a = 3
vm.a // => 3
2.created 钩子可以用来在一个实例被创建之后执行代码
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
- v-once你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
- 为了输出真正的 HTML，你需要使用 v-html 指令
- v-bind 缩写:,v-on缩写@
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
- vue前后台交互
### get请求
<body>
<div id="app">
<input type="button" @click="get()" value="点击" />
</div>
</body>
<script>
new Vue({
el : '#app',
data : {
},
methods:{
get:function(){
this.$http.get('/getData').then((response) => {
console.log(response);
alert(response.data);
},function(){
alert('请求失败！');
});
}
}
});
</script>
### post请求
this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){
alert(res.body);
},function(res){
console.log(res.status);
});
