让sf云开始我学生时代的云时代
1.vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
SPA single page application 单页面应用
兼容性：ie9+
特点：数据驱动页面、组件化开发
官网：cn.vuejs.org
全家桶：vue、vue-router、vue-cli、vue-tools、axios、vuex
2.起步
(1)安装
<!-- 引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2)设置挂载点
<div id="app"></div>
(3)实例化vue对象
new Vue({
//设置挂载点
el:'#app',//querySelector element 挂载点
//初试数据
data:{
msg:'hello'
}
})
(4)使用vue中的数据
<div id="app">
<!-- 第四步：获取vue中的变量内容 -->
<h1>{{msg}}</h1>
</div>
3.基础指令
(1)文本插值语法
mustache {{变量名}}
(2)v-text
(3)v-html
(4)v-model 表单双向绑定
input checkbox input
select
textarea
(5)v-on:事件名称 可以简写成@事件名称
(6)v-if 条件表达式满足时，页面中会存在指定的标签，否则不会存在指定的标签
(7)v-show 不论条件表达式的结果是什么，指定的标签都会存在，只不过是当表达式的结果为false，会增加display:none属性
示例代码：
<!-- 条件渲染 -->
<a href="" v-if="islogin">已登录</a>
<a href="" v-else>请登录</a>
<br>
<span v-show="islogin">{{name}}</span>
(8)v-for
循环，语法：<标签 v-for=“[(]每次遍历元素变量名[,元素对应的下标][)] of|in 要遍历的数组或者对象” ></标签>
示例代码：
new Vue({
el:"#app",
data:{
index:0,
arr:['web','php','java']
}
})
<button v-for="(item,index) of arr" @click="showCon(index)">科目{{item}}</button>
<div v-show="index==0">
<h1>web</h1>
</div>
<div v-show="index==1">
<h1>java</h1>
</div>
<div v-show="index==2">
<h1>php</h1>
</div>
注意：v-for 循环，可以有1-3个参数：
第一个参数是每次遍历时对应元素的变量名
第二个参数是每次遍历时对应元素的下标
第三个参数，只有要遍历的变量数据类型为对象时才会起作用，表示当前遍历的元素在对象中的索引值
(9)属性绑定
v-bind:属性名
style
class
4.自定义事件
在vue实例中，和data平级处通过methods属性来自定义事件
// 自定义事件
methods:{
submit(){
console.log(this.userinfo)
}
}
