1.vue是什么：
是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。
2.vue特性
轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
3入门体验
1.步鄹
①引入vue.js
<script src="vuejs/vue.js"></script>
②准备一个vue的工作台
<div id="app">{{message}}</div>
③创建vue对象
<script>
var app= new Vue({
el:"#app",//挂载相应的元素---可以挂载id,class,标签三种方式
data:{//是我们这个vue对象的数据
message:"hello,vue!"
}
})
</script>
④通过Vue实例直接修改data对象中的数据,及时同步的页面上
app.message="你好啊！！！！";
⑤方法的定义
<div id="app">
{{username}}
{{age}}
{{say("过来啊")}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello,vue!",
username : "隔壁老文",
age : 17,
},
methods:{
say(msg){
//this指向当前对象，当前app对象
return this.username+"说"+msg;
},
}
})
<div id="app">{{message}}
{{arr[0]}}//用数组的下标展示你想要展示的单个数据
</div>
<script>
new Vue({
el:"#app",//挂载相应的元素---可以挂载id,class,标签三种方式
data:{//是我们这个vue对象的数据
message:"hello,vue!",
arr:["1","2,3,4"]
}
})
<div id="app">
<!--监听input中值的改变同步到data中的message上:
v-model:数据的绑定；
将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。
-->
<input type="text" v-model="message" />
<!-- 显示app对象的message的值 -->
<h1>{{message}}</h1>
4.Vue指令
1.什么是指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
2..常见的指令
① v-text 主要是用于显示一个标签中的数据（标签原来的数据会覆盖，文本展示的时候，它不会解析标签）
如果值是html的值,也不会作为普通的文本使用.
标签中的属性值必须是data中的一个属性.
<div id="app">
<span v-text="message"></span><br/>
<span v-text="user.username"></span><br/>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "<h1>这是一个Span!</h1>",
user: {
username: "lw"
},
}
});
</script>
②v-html
1 {{表达式}} 可以插入的标签的内容中
2 v-text和v-html更改标签中的所有内容
<div id="app">
<div v-html="message"></div>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "<h1>这是HTMl代码</h1>"
}
});
</script>
③v-for 遍历（包括对象，数字，字符串）
语法：<标签 v-for="元素 in 数据源"></标签>
<div id="app">
<h1>遍历数组</h1>
<ul>
<li v-for="(v,i) in arr">{{v}}=={{i}}==</li>
</ul>
<h1>遍历对象</h1>
<ul>
<li v-for="(k,v) in student">{{k}}=={{v}}</li>
</ul>
<h1>遍历数字</h1>
<ul>
<li v-for="v in num">{{v}}</li>
</ul>
<h1>遍历字符串</h1>
<ul>
<li v-for="v in name">{{v}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello,vue!",
arr:["1","2","3"],
student:{
name:"自豪",
age:18,
},
num:10,
name:"dongdong",
},
})
</script>
④v-show 是否显示这个数据（只是隐藏而已）
<!-- 准备工作台-->
<div id="app">
<div v-show="myShow">我来了</div>
</div>
<!--创建vue对象-->
<script>
new Vue({
el:"#app",//挂载相应的元素---可以挂载id,class,标签三种方式
data:{//是我们这个vue对象的数据
username:"准备",
myShow:true,
},
})
</script>
⑤v-if 条件的判断 如果条件不满足的话，这个元素都不存在
<div id="app">
<div v-if="age<18">
孩子你好年轻
</div>
<div v-else-if="age>18 && age<30">
孩子到了而立之年了
</div>
<div v-else="age>30">
孩子老了
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
age : 17,
},
})
</script>
⑥v-bind 将data中的数据绑定到标签上,作为标签的属性.
1.语法:
1.1 为一个标签属性绑定一个值
<标签 v-bind:标签属性名字="表达式"></标签>
简写形式:
<标签 :标签属性名字="表达式"></标签>
1.2 为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象"></标签>
<div id="app">
<img v-bind:src="imgsrc" v-bind:title = "title"/>
<img :src="imgsrc" :title = "title"/>
<input v-bind="props"/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
imgsrc: "./img/1.jpg",
title: "二哈!",
props :{
type: "text",
name: "username",
}
}
});
</script>
⑦v-model 主要是用来双向绑定，只能用在表单元素上（input,select,textarea)
<div id="app">
<h1>绑定到type=text的input表单元素</h1>
姓名:<input type="text" v-model="inputValue"><br/>
data中的值:{{inputValue}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
<h1>绑定到textarea的元素</h1>
个人简介:<textarea v-model="textareaValue"></textarea><br/>
data中的值:{{textareaValue}}
<h1>绑定到单选的select的元素</h1>
技能:<select v-model="skills">
<option value="java">java</option>
<option value="php">php</option>
<option value=".net">.net</option>
</select><br/>
data中的值:{{skills}}
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
inputValue: "初始化的值",
checkboxValue: ["踢足球"],
radioValue: "打篮球",
textareaValue: "你是一个优秀的软件工程师!",
skills: "java",
}
});
</script>
⑧v-on 事件得绑定
<div id="app">
<input type="button" value="点我啊！！" v-on:click="say" />
<-- 绑定事件得简写形式-->
<input type="button" value="点我啊！！" @click="sayll('3')" />
</div>
<script>
new Vue({
el:"#app",
data:{
name:"打篮球真棒"
},
methods:{
say(){
alert("来啊,点我啊")
},
sayll(num){
alert(num+"来啊,点我啊")
},
}
})
</script>
5.Vue组件基础
1.什么是组建
组件是Vue中很强大的功能:简单点就是把很多的代码块封装成一个模板,多处都可以使用;
再进一步:自定义html标签:包含了一堆的功能;
2.全局组件
全局组件可以作用于全局的挂载对象;
全局组件:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)
局部组件:
在vue对象上:
components:{
组件名字:{组件的配置},
组件名字:{组件的配置},
}
3.局部组件
局部组件:只能作用于挂载的当前对象;
它是定义在vue对象里面得