初识vue.js

vue简介

• vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，vue被设计为可以自底层向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动

• 

自底向上逐层应用

-由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

• 详细介绍请参考Vue渐进式，自底向上逐层应用、MVVM、声明式渲染的理解

兼容性：ie9+

特点:数据驱动页面、组件化开发

官网：cn.vuejs.org/index.html

起步

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>

基础指令

1. 文本插值语法 mustache {{变量名}}

<div id="app">
  {{ message }}
</div>

<script>
 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

2. v-text
3. v-html
4. v-model 表单双向绑定
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:属性名

4.自定义事件

在vue实例中，和data平级处通过methods属性来自定义事件

// 自定义事件
methods:{
    submit(){
    	console.log(this.userinfo)
    }
}

二、数据本地存储

localStorage

sessionStorage

• 设置内容：setItem('key名称','要设置的值')

• 读取内容：getItem('key名称')

• 删除内容

•   删除一个：removeItem('key名称')
  

•   删除所有（清空）clear() 清空