学习前端,狂神的vue整合没有发布,自己大概整理一下
使用idea
前面巴拉巴拉就不写啦,自己去看看狂神的视频
第一个vue程序
首先要在idea中安装vue,file-setting-Plugins里面搜索Vue
然后安装,在new的地方可以看到这个
看不到的话自己去新建一下
把上面的代码复制到新建的Vue Component里就行了
新建一个html(demo1)
使用在线的cdn导入vue,版本好像有要求,我一开始使用了3.+的版本打开页面后不能正常显示
把版本降低后就可以了
在线的cdn
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({ //新建Vue
el:"#app", //绑定一个??
data:{ //数据
message : "hellovue"
}
});
</script>
</body>
在网页中通过控制台可以动态的(不需要刷新页面)改变其元素的值
MVVM:和MVC模型一样,每层都是分开的,Model,View,ViewModel
Vue是MVVM的实现者,他的核心就是实现了 DOM监听与数据绑定
基本语法:官网就有例子:Vue.js 介绍 — Vue.js 中文文档
v-bind 绑定对象
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({ //新建Vue
el:"#app", //绑定一个??
data:{ //数据
message : "hello vue"
}
});
</script>
if-else
<div id="app">
<h1 v-if="message==='A'">A</h1>
<h1 v-else>B</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({ //新建Vue
el:"#app", //绑定
data:{ //数据
message : "A"
}
});
</script>
for
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({ //新建Vue
el:"#app", //绑定一个??
data:{ //数据
items: [
//1,2,3
{message : "陈东1"},
{message : "陈东2"},
{message : "陈东3"}
]
}
});
</script>
v-on :绑定事件
<div id="app">
<button v-on:click="sayHi">click Me</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({ //新建Vue
el:"#app", //绑定一个??
data:{
message : "陈东来了"
}, //数据
methods: { //事件必须定义在 methods 中
sayHi : function (){
alert(this.message)
}
}
});
</script>
v-model 实现双向绑定:
<div id="app">
输入框<input type="text" v-model="message"> {{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({
el:"#app",
data:{
message : "123"
}
});
</script>
<div id="app">
单选框:
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女<br>
选择了:{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({
el:"#app",
data:{
message : ""
}
});
</script>
<div id="app">
下拉框:
<select v-model="message">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select><br>
选择了:{{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
let vm =new Vue({
el:"#app",
data:{
message : "" //可以在这里设置初始值
}
});
</script>
组件 Vue.component()
<div id="app">
<chendong></chendong>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
Vue.component("chendong",{ //第一个参数是组件的名字
template: "<li>Hello</li>"
})
let vm =new Vue({
el:"#app",
data:{
message : "" //可以在这里设置初始值
}
});
</script>
在组件中遍历数组:(我不是很理解,注释说得到现在能看懂一点了,以后看不懂在回来)
<div id="app">
<chendong v-for="item in message" v-bind:chen="item"></chendong> //将chen绑定到循环出的结果上,chen将作为参数传递给模板
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
Vue.component("chendong",{ //第一个参数是组件的名字
props :['chen'], //模板中的参数使用props传递
template: "<li>{{chen}}</li>"
})
let vm =new Vue({
el:"#app",
data:{
message : ["A","B","C"] //可以在这里设置初始值
}
});
</script>