好久没更新啦,一直忙于工作,感觉是时候要抽点时间出来进修一下啦,暂时在学习vue,虽然作为一个后台开发,但是感觉前端的东西还是要懂一丢丢的,暂时先从慕课上面的课程学起吧,记下一些笔记之类的
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bg {
color:red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</meta>
</head>
<body>
<div class="bg">
HelloWorld
{{msg}}
</div>
<div id = "test">
<div class="wj" v-bind:id="my_id">
{{msg}}
</div>
{{count+1}}
<!--<a v-bind:href="url">baidu</a>-->
<a :href="url">baidu</a>
<br/>
<!--<button type="button" v-on:click="submit()">加数字</button>-->
<button type="button" @click="submit()">加数字</button>
</div>
</body>
<script>
new Vue({
el:'.bg',
data:{
msg:"Hello Vue",
}
})
new Vue({
el:'#test',
data:{
msg:"Hello My Test",
my_id:"wj",
count:0,
url:'http://www.baidu.com',
},
methods:{
submit:function(){
this.count ++;
}
}
})
</script>
</html>
第一个vue的demo,学到了一个vue的基本写法,其中 el是绑定到哪个id上,如果你想绑定到class上的话,要写 .bg这样,如果是绑定到id上的话,就加#号就可以了。(如果是绑定到class上的话,有多个一样的话,他会绑定到第一个上的,所以最好还是绑定到id上吧。)
然后如果想绑定一些执行的方法,就直接写 @click=submit()就可以了,不用像以前一样写js,只要定义在那个vue里面的methods就可以了,跳转链接的话也是直接冒号 :href 到一个变量里,然后在vue结构体里面你自己定义就行了。
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</meta>
</head>
<body>
<div id="app">
{{msg}}
<p>
{{msg1}}
</p>
</div>
</body>
<script>
var arr = 'new test'
var app = new Vue({
el:'#app',
data:{
msg:"Hello Vue",
another:'another Hello Vue',
},
watch:{
msg:function(newval,oldval) {
console.log('newval is : '+newval)
console.log('oldval is : ' + oldval)
}
},
computed: {
msg1: function (){
return 'computed:' + this.msg + ',' + this.another + arr
}
}
})
</script>
</html>
第二份demo,主要是看watch和computed两个方法
watch相当于用来监听一个变量发生改变时候的情况
computed 可以用于多个,只要一个变了,他就会重新渲染一下数据
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</meta>
</head>
<body>
<div id="app">
<div v-if="count > 0">
count大于0,count的值是:{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
count的值是:{{count}}
</div>
<div v-else>
count小于-5啦{{count}}
</div>
<div v-show="count == -1">
123123123: {{count}}
</div>
<div v-for="item in list">
<div v-if="item.age > 28" v-bind:style="styleMsg" :class="{'myClass':true}">
{{item.name}}
</div>
<div v-else>
{{item.age}}
</div>
</div>
</div>
</body>
<script>
var arr = 'new test'
var app = new Vue({
el:'#app',
data:{
msg:"Hello Vue",
count:1,
styleMsg:{
color:'red',
'text-shadow':'0 0 5px #232323',
},
list:[{
'name':'wj',
age:29,
},{
'name':'xiaozhang',
age:18,
}],
},
})
</script>
</html>
这里主要是看v-for的列表循环