Vue基础知识点学习 day01
1.基本认识:
Vue是一个构建数据驱动的 web 界面的渐进式框架,所谓’‘渐进式’‘其实就是你掌握了Vue的多少用法就使用多少,不像一些框架必须掌握所有才能进行运用。
2.Vue特性
-
轻量
Vue.js库的体积非常小的,并且不依赖其他基础库。 -
数据绑定
对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。 -
指令
内置指令统一为(v—*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。 -
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。 -
组件化
组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
3.Vue资源安装
很简单,到官网上下载就可以,任意版本都行,然后直接将js拷贝到项目中就完事
4.Vue的简单使用认识- 步骤一(引入js文件):
这里需要注意两个小问题: 1.<script></script>必须是双标签,单标签的<script>是没有效果的 2.相对路径和绝对路径的注意
-
步骤二(准备挂载的元素):
这里我们创建一个<div>标签,给一个id
-
步揍三(准备数据):
<script>
var app = new Vue({
el:"#one", //el:"#xx" 就是与你给定id为xx的标签进行挂载(也就是建立联系)
当然el:".xx" 还能挂载class和el:"div"标签 (推荐还是通过id来进行操作
data:{ //vue的数据绑定在data属性上,data本身也是一个对象
massage:"hello vue", //然后在你所挂钩的标签中通过 {{massage}} 的书写方式就能获取其中的值
arr:[1,2,3,4], //数组也一样 {{arr[0]}}
employee:{ //对象 {{employee,name}}
name:"你好",
age:12
}
},
methods:{ //Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
say(){
alert("你好")
}
}
});
app.say(); //js调用方式 在挂载标签中 {{say}} Vue的掉用方法,里面可以不写()
</script>
Vue架构认识
MV VM模式:(medol view viewmodel)
具体解释:
VueJS表达式
VueJS表达式写在双大括号内:{{ expression }}
VueJS表达式把数据绑定到 HTML
VueJS将在表达式书写的位置"输出"数据
VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量
1
基本的算术运算
/*
* 运算 字符串 有字符串时除了‘+’加是字符串的拼接 其他会正常运算
**/
num: 5 + 10,
nums: "5" + 10,
chengfa: 5 * 9,
chufa: 10 / 2,
chengfas: "50" * 10,
2
<div id="app">
<!--三目运算 -->
{{ show1?"真":"假"}} //真
</div>
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el : "#app",
data : {
show1 : true //这里为true
}
});
</script>
3
1. 直接使用字符串字面值作为字符串对象
2. 使用data中的字符串对象
<div id="app">
{{"这是字面值"}}<br/>
{{"这是字面值".length}}<br/>
{{message.length}}<br/> //获取字符串长度
{{message.substring(1,5)}}<br/> //截取1-5个字符
{{message.substring(2,6).toUpperCase()}}<br/>
</div>
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "这是data中的数据"
}
});
</script>
4
对象操作
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
<div id="app">
{{user}}<br/>
{{user.toString()}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.getAge()}}<br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
var user = {
name: "张三",
age: 29,
getAge: function () {
return this.age //前台返回user的年龄
},
toString:function(){
return "姓名:"+this.name+",年龄:"+this.age; //这里的this就是user
}
};
var app = new Vue({
el: "#app",
data: {
user: user //
}
});
</script>
5
数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.
<div id="app">
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
}
});
</script>
Vue指令
可以去查看官方文档有详细的介绍和使用方法,作用
## 常见的指令
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if=“表达式” 判断条件
v-for=“表达式” 循环
v-model=“表达式” 数据双向绑定
v-on=“表达式” 注册事件
5:vue指令:
指令:v-*;
v-text:操作的文本;
v-html:操作的html;
v-for:
v-for=” currentObject in Objects”
如果是对象:
每次遍历得到的是对象的属性值:
v-for=” (v,k,i) in Objects”
如果是数组:
每次遍历得到的是数组中单独的一个值:
v-for=” (array,i) in arrays”
v-bind:给html标签绑定属性
单一属性绑定:v-bind:属性名=”表达式”
绑定一个对象:v-bind=”表达式”
v-model:数据模型的绑定:双向绑定
v-model=”表达式”;
作用于: input select textarea;如果是复选框:应该data使用数组;
v-show:是否显示,判断表达式的值,
true:显示;false:隐藏(只是增加一个样式:display:none,html元素没有删除的哦)
v-if:
1: v-if=”表达式”:true就做事情,false:压根就把这个元素给删除了;
2:v-if=”表达式”
v-else
3:v-if=”表达式”
v-else-if=”表达式”
v-else-if=”表达式”
v-else
v-on:
给一个html标签绑定事件:
v-on:事件名=”表达式”;
注意:this:当前对象
具体代码:
v-text=“表达式” 设置标签中的文本
<div id="xxx" v-Text="text">
{{text}}
</div>
<!--v-text不能解析html标签-->
<script>
new Vue({
el:"#xxx",
data:{
text:"<h1>你是谁<h1>"
}
})
</script>
<!--v-html能够解析html的标签功能-->
<div id="aaa" v-html="title">
{{title}},
</div>
<script>
new Vue({
el: "#aaa",
data: {
title: "<h1>Helle world<h1>",
}
})
</script>
<div id="myDiv" >
<div v-if="num<20">
<h1>数目小于20</h1>
</div>
<div v-elas-if="num>=40">
<h1>数目大于20小与40</h1>
</div>
<div v-elas>
<h1>数目大于40</h1>
</div>
</div>
<script>
new Vue({
el:"#myDiv",
data:{
num:20
}
})
</script>
<!--添加挂钩属性-->
v-model只作用于以下表单: [input select(下拉) textarea(文本域)]
<div id="Mydiv">
<input type="text" v-model="title">
{{title}}
<textarea v-model="text"></textarea>
{{text}}
<select>
<option v-for="a in arr" :arr="a.id">
{{a.name}}
</option>
</select>
</div>
<script>
new Vue({
el:"#Mydiv",
data:{
title:"123456",
text:"ssssssssssss",
arr:[
{id:1,name:"壹"},
{id:2,name:"贰"},
{id:3,name:"叁"},
]
}
})
</script>
<!--show为false时,只是页面隐藏信息,但是依然有值-->
<div id="MyDiv" v-show="false">
{{title}}
</div>
<script>
new Vue({
el:"#MyDiv",
data:{
title:"显示和隐式"
}
})
</script>
<body>
<button id="Mybtn"value="按钮" @click="say()" v-on:click="say">
按钮 //这里有两种注册事件的写法 一: v-on:click="say"
二:@click="say()" 方法的()括号可写可不写,需要传值就写上
</button>
<script>
new Vue({
el:"#Mybtn",
methods:{
say(){
alert("弹出")
}
}
})
</script>
</body>
组件:自定义编标
<script>
/**
* 注意点
* 1.一定要先定义组件,再进行vue的挂载
* 2.模板中必需有一个根标签
* 3.取名的问题
* 如果使用驼峰命名法 myTag -> <my-tag>
* /
//自定义一个全局组件(把相同的代码搞成一个组件,以后方法调用)
/**
* 全局组件:被Vue挂载到的地方都可以使用
* 定义了一个组件,名字叫做:mytag
* 第一个参数:组件名 第二个:模块
*/
Vue.component("mytag",{
//组合的模板
template:"<h1>假如有一千句html</h1>"
})
new Vue({
el:"#app"
})
new Vue({
el:"#app2"
})
</script>
局部组件
<div id="app">
<mytag></mytag>
</div>
<div id="app2">
<mytag></mytag>
</div>
<script>
new Vue({
el:"#app",
//组件(多个)
components:{
mytag:{
template:"<h2>我是局部组件</h2>"
}
}
})
</script>