Vue-Vue的核心概念-Vue的基本使用和常用命令

什么是Vue? 框架和库的区别是什么？

Vue是一套构建用户界面的“框架”，框架对于项目的入侵性都比较大，如果想要更换一个项目里的框架，就需要重构这个项目。

库（插件）提供一个小的功能，对项目的入侵性小，比如：jQuery，Swiper，Zepto，Bootstrap，Iscroll，Animate.css，wow.js，fullpage（zepto是针对移动的js库,侧重于js方面，bootstrap对响应式开发做了相应的处理，这处理过的界面可以在移动端大放光彩bootstrap侧重于html,css方面，然后bootstrap依赖jq有相应的插件支持）,如果某个库没完成需求，可以很容易切换到其他的库。

Vue的优势(又称为两大核心概念)？

核心概念一：通过数据驱动界面更新，无需操作DOM来更新界面。使用Vue只需要关心如何获取数据，如何处理数据，如何编写逻辑代码即可，然后只需要将处理好的数据交给Vue,Vue就能自动将处理好的数据渲染在界面上。

核心概念二：组件化开发，可以将一个完整的网页拆分成一个个独立的组件编写，然后将封装好的组件拼接成一个完整的网页。

Vue的基本使用:

1.利用传统下载并导入使用Vue.js

<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>

2.创建Vue的实例对象，并指定Vue实例对象的控制区域

<body>
<!--3.指定Vue实例对象的控制区域-->
<div id="app">
  <p>{{name}}</p>
</div>
<script>
//2.创建Vue的实例对象
  let vue = new Vue({
      //4.告诉Vue的实例对象，将来需要控制界面的上的哪个区域
      el:"#app",
      //5.告诉Vue的实例对象，被控制区域的数据是什么
      data:{
          name:"哑戏"
      }
  });
</script>
</body>

备注："{{}}"是art-template 模板引擎 的标准语法：

  <h2>{{user.name}}</h2>

定义WebStorm模板：

1.将需要定义为模板的代码复制->>按下Ctrl+Alt+S打开设置->>搜索live->>找到 Live Templates中的HTML\XML 并点击右上角加号，选中Live Templates，在输入框内粘贴已经复制好的模板代码

2.模板代码复制完成后，在Abbreviation中填入快捷键->>点击Change选中HTML->>最后点击OK，完成自定义WebStorm模板

Vue中数据的双向传递

默认情况下，Vue只会单向传递数据M-VM-V（从实例对象的data->>经Vue实例对象->>到被控制区域div）。但由于Vue基于MVM设计模式，所以也就提供法律双向传递的能力。

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。[注意点：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。但应该通过 JavaScript 在组件的 data 选项中声明初始值。]

<div id="app">
  <input type="text" v-model="message" placeholder="edit me">
  <textarea name="textarea" id="textarea" cols="30" rows="10" v-model="information" placeholder="edit me"></textarea>
  <select name="select" id="select" v-model="news" placeholder="edit me">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
  </select>
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            message:"" ,
            information:"",
            news:""
        }
    });
</script>

如图所示：

Vue中常用指令

  • v-mode: 在表单控件或者组件上创建双向绑定。仅限于<input>,<select>, <textarea>。

  • v-once: 只渲染元素和组件一次

<div id="app">
   <p v-once>原始数据：{{name}}</p>
   <p>当前数据：{{name}}</p>
</div>
<script>
   let vue = new Vue({
       el:"#app",
       data:{
           name:"哑戏"
       }
   });
</script>

  • v-cloak：这个指令保持在元素上，会将该元素直接隐藏，直到关联实例准备结束后编译data中绑定的数据。 配合 CSS 规则： [v-cloak] { display: none } 一起使用。

  • v-text: 会覆盖掉原来的内容，但不会解析HTML。类似于：innerText

<span v-text="msg">message</span>

data:{
           message:"<span>我是span</span>"
       }

显示结果：
  • v-html:会覆盖掉原来的内容，也会解析HTML。类似于：innerHTML
<span v-html="msg">message</span>

data:{
           message:"<span>我是span</span>"
       }

显示结果:
  • v-if: 条件渲染，如果v-if的取值是true就渲染，如果不是就不会创建该元素。v-if接受直接赋值true/false，或间接赋值（通过data传递要绑定的值），另一种间接赋值是v-if接受赋的值可以是表达式。另外，v-if和v-else是可以搭配使用的。
    注意点一：v-fi和v-else搭配使用时，中间不能出现其他内容。v-else不能单独使用。
    注意点二：用指令v-if切换true/false会创建或删除元素，频繁创建删除会导致性能不好 
   <!--第一种从data中获取赋值-->
   <p v-if="show">我是true</p>
   <p v-if="conceal">我是false</p>
   <!--第二种直接赋值-->
   <p v-if="true">我是true</p>
   <p v-if="false">我是false</p>
   <!--第三种从data中满足条件的赋值-->
   <p v-if="age >= 18">我是true</p>
   <p v-if="age < 18">我是false</p>
   <!--第四种v-if和v-else表达式-->
   <p v-if="age >= 18">我是成年人</p>
   <p v-else>我是未成年人</p>
   <!--v-if,v-else-if和v-else表达式-->
   <p v-if="score >= 90">优秀</p>
   <p v-else-if="score >= 60">良好</p>
   <p v-else>差</p>

   data:{
             show:true,
             conceal:false,
             age:17,
             score:100
         }
  • v-show: 和v-if指令相似，但v-show只创建一次元素，之后切换显示隐藏由display:none;来控制,避免了v-if由于频繁创建删除而导致的性能不好的问题。
<!--第一种从data中获取赋值-->
 <p v-show="show">我是true</p>
 <p v-show="conceal">我是false</p>
<!--第二种直接赋值-->
 <p v-show="true">我是true</p>
 <p v-show="false">我是false</p>
<!--第三种从data中满足条件的赋值-->
 <p v-show="age >= 18">我是true</p>
 <p v-show="age < 18">我是false</p>

   data:{
            show:true,
            conceal:false,
            age:17,
         }
  • v-for: 列表渲染，可以根据数据多次渲染元素，可以遍历数组，字符串，数字，对象。
   <ul>
       <li v-for="(value,index) in list">{{index}}---{{value}}</li>
        <li v-for="(value,index) in 'abcdefg'">{{index}}---{{value}}</li>
       <li v-for="(value,index) in 6">{{index}}---{{value}}</li>
       <li v-for="(value,index) in obj" >{{index}}---{{value}}</li>
   </ul>

   data:{
           list:["张三","李四","王五","赵六"] ,
           obj:{
               name:"ansi",
               age:20,
               gender:"female",
               class:"Law"
           }
       }

结果：

注意点一：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
注意点二：永远不要把 v-if 和 v-for 同时用在同一个元素上

  • v-bind: 常用于给元素绑定动态地绑定一个或多个attribute，缩写【 ：】；
   <input type="text" v-bind:value="name">
   <input type="text" :value="name">
   <input type="text" :value="age + 1">

 data:{
           name:"ansi",
           age:20
       }

注意点：v-bind指令在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

<style>
       .size{
           font-size: 100px;
       }
       .color{
           color: red;
       }
       .active{
           background: skyblue;
       }
</style>
<!--利用v-bind给元素绑定类名的方法-->
 <p :class="['size','color','active']">我是段落</p>
<!--利用v-bind给元素绑定类名,可以编写三目运算符来实现按需绑定-->
 <p :class="['size','color',flag ? 'active' : '']">我是段落</p>
<!--利用v-bind给元素绑定类名,可以通过对象来决定是否需要绑定-->
 <p :class="['size','color',{'active' : true}]">我是段落</p>
<!--利用v-bind给元素绑定类名,可以通过Model中的对象来代替数组-->
 <p :class="obj">我是段落</p>

data:{
           flag:false ,
           obj:{
               "size":true,
               "color":true,
               "active":true
           }
       }

<!--利用v-bind给元素绑定样式,如果样式中带-也必须用''包裹-->
 <p :style="{color:'red','font-size':'100px'}">我是段落</p>
<!--利用v-bind给元素绑定样式,可以通过Model中的对象绑定样式-->
 <p :style="obj">我是段落</p>
<!--利用v-bind给元素绑定样式,如果要绑定Model中的多个对象,可以通过[]包裹-->
 <p :style="[obj1,obj2]">我是段落</p>
data:{
          obj1:{
              "color":"blue",
              "font-size":"100px"
          },
           obj2:{
              "background":"red"
           }
      }

归纳：给元素绑定数据的三种方式{{}}，v-text ，v-html； 另外v-model只给<input>,<textarea>,<select>这三个标签动态的绑定 attribute；

   <p>{{name}}</p>
   <p v-text="name"></p>
   <p v-html="name"></p>

   <input type="text" v-model="name">
  • v-on: 专门用于给元素绑定监听事件，缩写：@；
    参数：event；
    修饰符：
    .stop - 调用 event.stopPropagation()，阻止事件冒泡行为。
    .prevent - 调用 event.preventDefault()，通知 Web 浏览器不要执行与事件关联的默认动作。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
 <button v-on:click="myFn">我是按钮</button>
 <!--v-on指令的简写-->
 <button @click="myFn">我是按钮</button>

 let vue = new Vue({
       el:"#app",
       data:{},
       methods:{
           myFn(){
               alert('ansi')
           }
       }
   });

注意点：v-on指令监听的回调函数的名称后面可以加（）也可以不加；添加（）后，可以给回调函数传递原生的事件对象$event作为参数；如果想在监听是回调函数中使用data中的数据，必须在前面加上this；

自定义指令

1.自定义全局指令:在任何一个Vue控制的区域都能使用
<div id="app">
    <input type="text" v-focus>
</div>


// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时,,该元素已经被渲染出来，在调用 inserted可以实现聚焦
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

结果：

钩子函数：指令会在不同的生命周期阶段执行

  • bind：只调用一次，指令第一次绑定到元素时调用 （此时该元素还没有被渲染到界面上）
  • inserted：被绑定元素插入父节点时调用 （此时该元素已经被渲染到界面上）

钩子函数的参数:

  • el :表示指令所绑定的元素，可以用来直接操作 DOM。
  • binding：一个对象，包含以下 property：
    name：指令名，不包括 v- 前缀。
    value：指令的绑定值
<div id="app">
    <p v-color="'blue'">我是段落</p>
    <p v-color="curColor">我是段落</p>
</div>

Vue.directive('color', {
        //指令第一次绑定到元素时调用，此时该元素还没有被渲染出来
        bind:function (el,binding) {  //el就是被绑定指令的那个元素,binding对象用于保存传递的参数
            el.style.color = binding.value;
        }
    });

let vue = new Vue({
        el:"#app",
        data:{
           curColor:"green"
        },
        methods:{
            
        }
    });

结果：
2.自定义局部指令:只能在自定义的那个Vue实例中使用
<div id="app1">
    <p v-color="'blue'">我是段落</p>
</div>
<div id="app2">
    <p v-color="'red'">我是段落</p>
</div>

let vue1 = new Vue({
        el:"#app1",
        data:{},[图片上传中...(D(Z0PDWPW73{TE(5_NJ7NNW.png-bbfbcd-1594645667487-0)]

        methods:{}
    });

 let vue2 = new Vue({
        el:"#app2",
        data:{},
        methods:{},
        //注册一个局部自定义指令
        directives:{
            "color":{
                //指令第一次绑定到元素时调用，此时该元素还没有被渲染出来
                bind:function (el,binding) {  //el就是被绑定指令的那个元素,binding对象用于保存传递的参数
                    el.style.color = binding.value;
                }
            }
        }
    });

结果：
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351