vue初学习（一）—— 基础指令

初步认识vue

一、Vue特点，
Vue是不兼容ie8以及以下，因为Vue使用了不兼容ie8以及以下的es5的语法

1. 易用，偏重于应用
2. 灵活： 完整的生态系统
   1. 小米公司： 手机、电视、电脑、衣服、智能家居、。。。
3. 高效
   1. vue.js的原文件很小
   2. 性能高

二、 Vue为什么性能高？

• 应该Vue使用了 虚拟DOM 技术

三、 虚拟DOM是什么呢？

• 使用js对象模型来模拟真实DOM节点

四、Vue是一个MVVM类型框架，M V VM

五、什么是MVC

• MVC其实一个架构思想，指的是讲一个软件【应用】分为三个部分
  • M Model 模型 --> data 数据
  • V View 视图 --> 界面
  • C Controller 控制器 --> 处理业务逻辑
• MVC思想来源于后端

六、什么是jsx?（后面的{{}}里面可以写js语法就是这个的体现）

• javascript + xml
  • xml就是标签化语法
• 在标签里面写js

---

基础指令

1. 什么是指令

   • 指令其实就是一个属性

2. 指令是用来干什么的呢？

   • 指令是使用操作DOM

3. Vue提供了14个内置指令，供我们使用

---

1、双大括号语法 {{}} {{}}里面就可以写js语法了，这就是所谓的jsx

2、当我们引入vue.js之后，vue会注册一个Vue全局函数 window.Vue = functioin () {}

3、Vue是一个构造函数 =》 可以实例化

4、const vm = new Vue（） ，可以这样写，也可以直接写 new Vue()就行

5、new Vue() 要有el来挂载才行，一般这个el都是元素的id,不然没法触发执行

---

v-bind:指令： 单向数据绑定 ，将数据赋值给属性值

 <div id="app">
    <h2> 单向数据绑定  v-bind  将数据赋值给属性值 </h2>
      <img v-bind:src="pic" alt="">
      <!-- 简写 -->
      <img :src="pic" alt="">

 new Vue({
    el: '#app',
    data: {
      pic: 'url'

---

v-model: 双向数据绑定，类似两边写会相互影响,绑定的是== 数据 ==！！！！这个绑定的数据就是这个input框输入的东西

• 仅仅是应用于表单元素
  • v-model默认绑定了表单元素的value属性
  • 含义
    • 数据改变，视图也会随之改变
    • 视图改变，数据也会随之改变

 <h2> 双向数据绑定  v-model </h2>
    <div>
      <label for=""> 用户名 </label>
      <input type="text" v-model = "username">
    </div>
    <div>
      <label for=""> 密 码 </label>
      <input type="text" v-model = "password">
    </div>

	new Vue({
	    el: '#app',
	    data: {
	      username: '',
	      password: '',

这种是指在vue控制台和视图之间的可以实现双向数据交换，v-model还有其他的用法，表单中的还有其他的v-model的用法

---

数据展示指令： v-text v-html

	<h1> 数据展示 </h1>
	    <h3> {{}} </h3>
	    <p> {{ name }} </p>
	    <h3> v-text  </h3>
	    <p v-text = "name"></p>
	    <div v-text = "xml"></div>
	    <h3> v-html </h3>
	    <p v-html = "name"></p>
	    <div v-html = "xml"></div>

{{}} vs v-text vs v-html 区别

• v-text 和 v-html 写法和结果是等价于 {{}}
• {{}} 语法呢在刷新页面的时候，会出现闪现问题
• v-text 和 v-html 是没有的
• v-html会解析标签语法

---

条件渲染：v-show v-if

条件渲染实现方式

1. 条件展示
   1. v-show
      1. 控制的是元素的 display 样式
      2. 如果初始条件为 false , 元素也会渲染，所以初始渲染开销较高，
      3. v-show的切换开销较低
2. 条件判断 == 适用于通过一个逻辑判断来决定点击出现酱紫的==
   1. v-if v-else v-else-if
   2. 如果初始条件为 false , 元素不会渲染，渲染开销较低
   3. 条件判断的切换开销较高，因为它要不断的生成和销毁元素

	<div id="app">
	    <h2> 条件展示 v-show </h2>
	    <div class="mask" v-show = "flag"> 模态框 </div>
	    //这里的模拟块渲染了 但是没有展示的意思，所以上面说的初始条件为false元素也会渲染的意思

 new Vue({
    el: '#app',
    data: {
      flag: false

条件判断

 <h2> 条件判断 </h2>
      <h3> 单路判断 </h3>
        <p v-if = "f"> NBA - 詹姆斯 </p>
        //这时f为false时不能显示詹姆斯
        
      <h3> 双路判断 </h3>
        <h4> 女孩 选择  两个男孩中的一个 </h4>
        <p v-if = "choose"> AA </p>
        <p v-else> BB </p>
		//这时choose为true就显示AA，false就显示BB

      <h3> 多路判断 </h3>
        <input type="text" v-model = "grade">
        <p v-if = "grade >= 80"> 优秀 </p>
        <p v-else-if = "grade >= 60"> 良好 </p>
        <p v-else = "grade < 60"> 不及格 </p>
		//这里是双向数据绑定的，修改了input框里面的数值就相当于修改了data中的数值，从而达到更改判断条件的操作

	 new Vue({
	    el: '#app',
	    data: { 
	      grade: 60
	    }
	  })