您当前的位置： 首页 > 学无止境 > 网站建设 网站首页网站建设
Vue基础-第1天-{Vue基础}-01
发布时间：2020-01-30 19:31:37编辑：雪饮阅读（）
Vue安装
这里以npm安装为例。Npm是node.js的命令，所以要先安装node.js。
Node.js我选择的是这个包node-v8.9.3-x64.msi(如果要安装Vue Devtools则至少要大于8.10，这里暂不安装)，以我win10为例，如果没有特殊需求一路next就可以安装完成。完成后在cmd命令行中运行npm命令，如果没有报错就ok了。
然后选择一个你要放置npm项目的文件夹用powerShell运行vue安装命令即可，如：
引包
在刚才npm安装vue后的文件夹中新建立一个页面引入vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
</body>
</html>
然后在浏览器中访问该页面，在控制台中就可以看到vue对象了
Vue实例化
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:'<div>{{ msg }}</div>',
data:function(){
return {
msg:'你好vue'
}
}
});
/*
* el:指定vue作用容器
* template:el中的内容模板，该内容模板会直接替换el容器
* {{ msg }} 两个花括号中一个变量且变量两边有两个空格，这是插值模板语法
* */
</script>
</body>
直接把el容器做为模板
当template为空时，可以直接用插值模板语法于el容器中,template和el同时有插值模板语法时template优先
<body>
<div id="app">{{ msg }}</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:'',
data:function(){
return {
msg:'你好vue'
}
}
});
</script>
</body>
支持三元
{{ 1 > 2 ? '真':'假'}}
指令系统
v-text
相当于innerText
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:'<div v-text="msg"></div>',
data:function(){
return {
msg:'你好vue'
}
}
});
</script>
</body>
v-html
相当于innerHtml
<script type="text/javascript">
new Vue({
el:"#app",
template:'<div v-html="msg2"></div>',
data:function(){
return {
msg:'你好vue',
msg2:'<h1>你好vue</h1>'
}
}
});
</script>
v-if
<script type="text/javascript">
new Vue({
el:"#app",
template:'<div v-if="isShow">v-if语法</div>',
data:function(){
return {
msg:'你好vue',
msg2:'<h1>你好vue</h1>',
isShow:true
}
}
});
</script>
这里的v-if为false时页面元素中不会出现该元素但会有一个“<!---->”的占位元素出现
v-show
v-show不像上面直接连源码连dom都不存在，v-show仅仅是display控制显隐的
注意：当要在template中使用大量文本时则用es6的模板语法“``”来声明定义字符串。当template中有一个父容器，否则有可能会报错。
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-if='isShow'>v-if语法</div>
<div v-show='isShow'>v-show语法</div>
</div>`
,data:function(){
return {
msg:'你好vue',
msg2:'<h1>你好vue</h1>',
isShow:true
}
}
});
</script>
v-else
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-if='isShow'>显示了</div>
<div v-else>隐藏了</div>
<div v-show='isShow'>v-show语法</div>
</div>`
,data:function(){
return {
msg:'你好vue',
msg2:'<h1>你好vue</h1>',
isShow:false
}
}
});
</script>
v-for
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-if='isShow'>显示了</div>
<div v-else>隐藏了</div>
<div v-show='isShow'>v-show语法</div>
<ul>
<li v-for = 'item in menuList'>{{ item.id}}</li>
</ul>
</div>`
,data:function(){
return {
msg:'你好vue',
msg2:'<h1>你好vue</h1>',
isShow:false,
menuList:[{id:1},{id:2}]
}
}
});
</script>
v-for(带下标索引)
<li v-for = '(item,index) in menuList'>{{ index }}----{{ item.id}}</li>
Bind绑定
<body>
<style>
.red{
color:red;
}
.test{
font-size:36px;
}
</style>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-bind:class="msg" class="test">bind绑定</div>
</div>`
,data:function(){
return {
msg:'red'
}
}
});
</script>
</body>
这里bind绑定的class不会覆盖原来的class而是在原来的基础上追加一个新的
支持表达式
<div v-bind:class="'red'" class="test">bind绑定</div>
这样就可以不用在data中声明变量了
对象式表达式(按需bind)
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-bind:class="{red:isRed}" class="test">bind绑定</div>
</div>`
,data:function(){
return {
isRed:true
}
}
});
</script>
v-on
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-bind:class="{red:isRed}" class="test">bind绑定</div>
<button v-on:click = 'isRed=!isRed'>切换字体颜色</button>
</div>`
,data:function(){
return {
isRed:true
}
}
});
</script>
Methods
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-bind:class="{red:isRed}" class="test">bind绑定</div>
<button v-on:click = 'changeColor'>切换字体颜色</button>
</div>`
,data:function(){
return {
isRed:true
}
},
methods:{
changeColor(){
//这里的this已经被vue自动处理了，所以可以直接操作data的数据
this.isRed=!this.isRed;
}
}
});
</script>
关键字词：vue安装,npm,实例化,指令系统,bind,on
上一篇：CI中的表单验证