Vue Node.js iview
一、 安装
1.1步骤
- Node.js zip 文件下载
- Node.js zip 配置步骤
- Vue NPM方式安装
- 安装 Vue cli
cnpm install vue-cli -g - 创建项目
二、 Vue Vue.js
2.1 Vue基础
2.1.1 el:挂载点
el 类似于JQ的选择器
| id： | # |
|---|---|
| class | . |
| 标签 | 直接使用 |
Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
是否可以设置其他的dom元素呢?
可以使用其他的标签,不能使用在HTML和BODY上
2.1.2 data:数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
三、本地应用
3.1 Vue指令
3.1.1 v-text
设置标签的文本值(textContent)
<body>
<div id="app">
<h2 v-text="message">你好</h2>
<!-- 不会显示"你好" -->
<h2 v-text="info">你好</h2>
<!-- 不会显示"你好" -->
<h2>{{ message }}你好</h2>
<!-- 会显示"你好" -->
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el : "#app",
data:{
message:"YoRHa! ! !",
info:"YoRHa"
}
})
</script>
结果：
3.1.2 v-html
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content: "<a href='https://blog.csdn.net/lushixuan12345'>YoRHa</a>"
}
})
</script>
</body>
结果：
3.1.3 v-on
- v-on指令的作用是:为元素绑定事件
- 指令可以简写为@
- 绑定的方法定义在methods属性中
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doit">
<input type="button" value="v-on指令" @click="doit">
<h2 @click="changeStudent">{{student}}</h2>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
student:"张三"
},
methods:{
doit:function(){
alert("do");
},
changeStudent:function(){
this.student+="是法外狂徒"
},
},
})
</script>
</body>
结果：
点击张三后：
3.1.4 案例：计数器
加加减减到10或0时alert
<body>
<div id="app">
<div class="input-num"></div>
<button @click="sub">
-
</button>
<span>{{ num }}</span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1,
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("最大为10")
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("最小为0")
}
},
},
})
</script>
</body>
结果：
3.1.5 v-show
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
<body>
<div id="app">
<div id="app">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
</script>
</body>
3.1.6 v-if
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换v-show,反之使用v-if,前者的切换消耗小
<body>
<div id="app">
<div id="app">
<p v-if="isShow">我是一个p标签</p>
<p v-if="表达式">我是一个p标签</p></div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
</script>
</body>
3.1.7 v-bind
- v-bind指令的作用是:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
- 需要动态的增删class建议使用对象的方式
<body>
<div id="app">
<div id="app">
<img v-bind:src= "imgSrc" >
<img v-bind:title="imgtitle+'!!!!">
<img v-bind:class="isActive?'active':'' ">
<img v-bind:class="{active:isActive}">
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"YoRHa",
isActive:false
}
})
</script>
</body>
3.1.8 v-for
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是( item,index ) in数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
<body>
<div id="app">
<div id="app">
<ul>
<li v-for="item in arr"></li>
<li v-for="(item,index) in arr" :title="item">{{ index }}{{ item }}
</ul>
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</body>
3.1.9 v-on 补充
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有多种 官方文档详情
<body>
<div id="app">
<div id="app">
<input type="button" value="点击" @click="doIt(666)">
<input type="text"@keyup.enter="sayHi">
</div>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods: {
doIt:function(p1){
console.log(p1);
},
sayHi:function(){
alert("hello");
},
},
})
</script>
</body>
3.1.10 v-model (双向数据绑定)
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
<body>
<div id="app">
<input type="text" v-model="message">
<h2>{{ message }}</h2>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"YoRHa"
}
})
</script>
</body>