这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了,
一vue.js的使用:
可以在页面是直接使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<style>
#app{
color: blueviolet;
}
.bg{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="bg2">
helloWorld
{{message}}
{{count +2}}
</div>
<div>
{{count}}
{{template}}
</div>
<div v-html="template"></div>
<div>
<a v-bind:href="url">baidu</a>
</div>
<a :href="url"></a>
<a href="http://www.baidu.com">baidu</a>
<button type="button" v-on:click="submit()">加数字</button>
<button type="button" @click="submit()">加数字</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:'hellowprld',
count:0,
url:'http://www.baidu.com',
template:'<div> heoo</div>'
},
methods:{
submit:function(){
this.count++
}
}
})
</script>
</html>
就可以在页面上直接使用了, 这种引入是不是很好调式的,
所以一般在开发环境中引入:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
vue.js,是一个双向数据绑定的前端框架,而且,如果代码简洁,是不直接操作dom的,,而是通过组件直接进行通讯;
new Vue({ el:"#app", data:{ message:'hellowprld', count:0, url:'http://www.baidu.com', template:'<div> heoo</div>' }, methods:{ submit:function(){ this.count++ } } })
通常会创建一个vue的实例,如上面脚本,代表,vue.js来管控上面页面来操作.,
通常不是这样来操作页面的,而是使用vue.js的npm来管理依赖库,webpack进行打包页面,通过路由来进行页面进行转发,同时每个页面都会拆分成几个组件来进行操作,
如上图就是分成4个组件来操作的,会存在组件之间的通讯,涉及子组件,父组件的之间的通讯.