1. Vue是个渐进式的框架（可以将Vue作为应用的一部分嵌入，可以一步一步将应用改造成Vue）
2. Vue的优点：
   1. 解耦视图和数据
   2. 可复用的组件
   3. 前端路由技术
   4. 状态管理
   5. 虚拟DOM
3. 传统JS属于“命令式编程”，无法实现样式和数据分离
   Vue属于“声明式编程“，实现样式和数据分离（数据更改直接在data中进行），使代码更清晰

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

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',//数据调用必须和选择的元素一致
        data:{
            message:'hello'
        }
    })
</script>

4. Vue代码做了些什么事情？
   1. 创建了一个Vue对象
   2. 为Vue对象传入了一些options{el:决定对象挂载到哪个元素 data:存储数据}
5. 浏览器渲染过程
   浏览器解析到Vue创建的对象之前都是根据普通的html解析，解析到Vue对象后交给Vue对象进行解析，Vue对象将数据进行解析（替换）
6. Vue响应式编程（数据改变会马上重解析 ）
7. Vue的MVVM模型 Model-View-ViewModel
   

<h1>hello {{name}} </h1>
<h1>{{name1}} {{name2}} </h1>
<h1>{{name1 + ' ' + name2}} </h1>
<h1>{{name1 * 2}} </h1>

//当data中数据改变时，元素中的数据不改变
<h1 v-once>hello {{name}} </h1>

<h1 v-html="url">hello</h1>
//url为含标签的字符串

<h1 v-text="msg">hello</h1>
//msg为字符串
//缺点 会覆盖元素中原有文本 建议用{{}}

<h1 v-pre>hello {{name}} </h1>
//{{name}}将不会被vue解析

<h1 v-cloak>hello {{name}} </h1>
//vue还没解析这段代码时，使这段代码不显示，解析完这段代码后会去掉v-cloak，使代码显示
//解决因为卡顿，{{name}}没有及时解析而引起的用户体验问题

1. 简单绑定

<img v-bind:src="url">
//v-bind表明src属性是动态绑定的，于是就会在data中寻找对应的值

2. 对象绑定

<div v-bind:class="{active:isActive,text-danger:hasError}"></div>
<button v-on:click="btnClick">按钮</button>
//添加一个对象，当对象中的类名的值为true时，该类绑定到元素上
<script>
  const app=new Vue({
    el:'#app',
    data:{
      isActive:true,
      hasError:false
    },
    methods:{
    	btnClick:function(){
    		this.isActive = !this.isActive
    	}
    }
  })
</script>

3. 数组绑定

<div v-bind:class="[class1,class2]"></div>
//<div v-bind:class="['class1','class2']"></div>
//有''表示为字符串 无''表示变量
<script>
  const app=new Vue({
    el:'#app',
    data:{
    	class1:'aa',
    	class2:'bb'
    }
  })
</script>

4. style对象绑定

//50px得加''，否则当作变量解析
//两种表达方式
<div v-bind:style="font-size:'50px'"></div>
<div v-bind:style="fontSize:'50px'"></div>
<div v-bind:style="{fontSize:finalSize + 'px', color:finalColor}"></div>
//有''表示为字符串 无''表示变量
<script>
  const app=new Vue({
    el:'#app',
    data:{
 		finalSize：100,
 		finalColor:'red'
 		//data中字符串得加''
    }
  })
</script>

5. style数组绑定

<div v-bind:style="[baseStyle,base]"></div>
//有''表示为字符串 无''表示变量
<script>
  const app=new Vue({
    el:'#app',
    data:{
		baseStyle:{fontSize:'20px'},
		base:{backgroundColor:'red'}
    }
  })
</script>

1. 参数传递

//方法没有形参时 加不加()都一样
<button @click="btn1()">按钮</button>
<button @click="btn1">按钮</button>
//方法有形参时 加了(),没有参数 undefined
<button @click="btn2()">按钮</button>
//方法有形参时 不加() 传递浏览器默认事件event
<button @click="btn2">按钮</button>
//方法有两个形参时 不加() 第一个形参为浏览器默认event 第二个为undefined
//方法有两个形参时 加() 不传参 两个都是undefined
<button @click="btn3">按钮</button>
//方法有两个形参时 通过$event获取
<button @click="btn1(12,$event)">按钮</button>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    methods:{
        btn1(){
            console.log('btn1');
        },
        btn2(e){
            console.log(e);
        },
        btn3(e,v){
            console.log(e);
            console.log('v:',v);
        }
    }
  })
</script>

2. 修饰符使用

//阻止冒泡			''和""都可以
<button @click.stop='btnClick'>按钮</button>
//阻止默认事件
<input tupe="submit" value="提交" @click.prevent="subFunc">
//监听按键             监听enter
<input type="text" @keyup.enter="keyFunc">
//一次回调
<button @click.once="btnFunc">一次使用</button>

1. 语法

<div id="app">
//v-if 如果为true则显示 为false则不显示
<h1 v-if="isShow"></h1>
//v-if-else 显示true的那个
<h1 v-if="isShow">if显示</h1>
<h1 v-else>else显示</h1>
//v-else-if 多条件不建议使用 太复杂 
<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=60">良好</h1>
<h1 v-else>差</h1>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        isShow:true,
        score:50
    }
  })
</script>

2. 实例 实现注册账号邮箱的转换

<div id="app">
    <span v-if="isUser">
    //label作用：当鼠标点击label文本的时候for所指向的input会聚焦
        <label for="username">用户账号</label>
        //不同的key用来解决切换后输入框内的内容不清空的情况
        <input type="text" id="username" placeholder="用户账号" key="123">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="abc">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        isUser:true,
    }
  })
</script>

//当v-if为false时，元素根本不在dom中
//当v-show为false时，给元素添加一个行内样式dipslay:none
//当需要频繁在显示和隐藏之间切换时用v-show
//当只有一次切换时，多用v-if
<h1 v-if="isShow">if显示</h1>
<h1 v-show="isShow">show显示</h1>

1. 数组遍历

<div id="app">
    <ul>
    //只获得value
        <li v-for="item in names">{{item}}</li>
    </ul>
    <ul>
    //获得index和value index在后
        <li v-for="(v,i) in names">{{i+1}} . {{v}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        names:['jack','lucy','candy']
    }
  })
</script>

2. 对象遍历

<div id="app">
    <ul>//获取value
        <li v-for="item in info">{{item}}</li>
    </ul>
    <ul>//获取value和key key在后面
        <li v-for="(v,k) in info">{{i}} . {{v}}</li>
    </ul>
    <ul>//获取value key index
        <li v-for="(v,k,i) in info">{{i}} . {{k}} . {{v}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        info:{
            name:'why',
            age:18
        }
    }
  })
</script>

3. v-for绑定和非绑定的区别（key）

<div id="app">
    <ul>
    //绑定一个key 要和item相同 作用：高效更新虚拟DOM
        <li v-for="item in names" key="item">{{item}}</li>
    </ul>
</div>

<script src="vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
        names:['jack','lucy','candy']
    }
  })
</script>

1. text/textarea

//v-model可作用于 text 和 textarea
//原理： v-bind绑定一个value属性 v-on监听input事件
<input type="text" v-model="message">
//复杂写法
<input type="text" :value="message" @input="change">
//或把event直接写在input里
<input type="text" :value="message" @input="message=$event.target.value">

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好"
        },
        methods:{
            change(e){
                this.message = e.target.value;
            }  
        }
    })
</script>

2. radio

<div id="app">
  <label for="male">
  //没有用v-model时 要用name才能实现单选
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h2>您的性别是：{{sex}}</h2>
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
          sex:'男'
        },
    })
</script>

3. checkbox

<div id="app">
  <label for="agree">
//单选框
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <button :disabled="!isAgree">下一步</button>
//多选框
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>爱好:{{hobbies}}</h2>

//值绑定
<label v-for="item in originHobbies" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>	
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
          isAgree:false,
          hobbies:[],
          originHobbies:['足球','篮球','羽毛球'],
        }
    })
</script>

4. select

<div id="app">
    <select name="abc" v-model="fruit" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="葡萄">葡萄</option>
        <option value="梨">梨</option>
        <option value="火龙果">火龙果</option>
    </select>
    <h1>水果：{{fruit}}</h1>
</div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            fruit:[]
        
                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/ChristWTF/article/details/104256469

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。