【Vue】基础语法

Vue基础

基础-了解什么是vue

• 目前前端**必备**技能

• 传统方式已经不能适应目前越来越**复杂**的开发需求

• 用vue的开发方式会简单、高效

  三大框架(vue、react、angular)

基础-vue 能做什么

1. 不用操作DOM
2. 单页面应用web项目(SinglePageApplication 项目，例如https://worktile.com/）简称:SPA
3. 传统网站开发 一般来说 需求不大
4. 当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程序/MpVue…

**结论:**掌握Vue的开发语法 相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境

基础-vue 特点

1. 数据驱动视图 可以让我们只关注数据
2. MVVM 双向绑定
3. 通过**指令**增强了html功能
4. 组件化 复用代码
5. 开发者一般只需要关注数据

基础-Vue-API

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

提示:阻止Vue在启动时生成生产提示

Vue.config.productionTip = false 

• 所有关于Vue的问题都可以通过查阅文档解决

基础-vue 三种安装方式

1. 直接下载源码然后通过路径引入

   • 开发版本：https://vuejs.org/js/vue.js
   • 生产版本：https://vuejs.org/js/vue.min.js

2. 在线cdn引入的方式

   <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   

3. 采用 npm 安装的方式

   // 现状: 都会采用npm的方式来进行正式项目开发
   npm install vue 
   

注意: Vue.js 不支持 IE8 及其以下版本

基础-HelloWorld

步骤:

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象new Vue();
4. 设置Vue实例的选项:如el、data...     
			new Vue({选项:值});
5. 在<div id='app'></div> 中通过{{ }}使用data中的数据

// 1.我是Vue所管理的视图div #app 
<div id="app">
    // 5.在视图里使用Vue实例中data里面的list数据
    <p>{{list}}</p>
</div>
// 2.引入vue.js 
<script src="./vue.js"></script>
<script>
    // 3.实例化Vue对象
    new Vue({
    // 4.设置Vue实例的选项：如el、data...  
        el: '#app',
        data: {
            list: '我是模拟发起ajax请求后从服务端返回的数据'
        }
    })
</script>

基础-实例选项-el

• 作用:当前Vue实例所管理的html视图
• 值:通常是id选择器(或者是一个dom对象)
• **注意！！！！**不要让el所管理的视图是html或者body!!!

路径:

new Vue({
    // el: '#app' ,  id选择器
    // el: '.app',   class选择器
    el: document.getElementById("#app") // dom对象
})

基础-实例选项-data

掌握data基本用法

Vue 实例的data(数据对象)，是响应式数据(数据驱动视图)

1. data中的值{数据名字:数据的初始值}

2. data中的数据msg/count 可以在视图中通过{{msg/count}}访问数据

3. data中的数据也可以通过实例访问 vm.msg或者vm.$data.msg

4. data中的数据特点:响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

路径

let vm = new Vue({
    el: "#app",
    data: {
       msg: 'abc',
       count: 100
       list: [1, 2, 3]
    }
})
vm.msg = 200
console.log(vm)
console.log(vm.msg)
console.log(vm.$data.msg)

基础-实例选项-methods

掌握实例选项methods中方法的使用及注意事项

• methods其值为一个对象
• 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
• 方法中的 this 自动绑定为 Vue 实例。
• methods中所有的方法 同样也被代理到了 Vue实例对象上,都可通过this访问
• 注意，不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例

let vm =new Vue({
 el:"#app",
 data:{
     name:"Hello world",
     name2:"Hello world2"
 },
 methods:{
     // 常规函数写法
     fn1:function(){
         console.log(this.name)
         this.fn2()
     },
     // es6 函数简写法
     fn2() {
         console.log(this.name2)
     }
 }
})

路径: 参照代码示例

基础-术语解释-插值表达式(重要)

理解和使用插值表达式

作用:会将绑定的数据实时的显示出来

形式: 通过 **{{ 插值表达式 }}**包裹的形式

用法:{{js表达式、三元运算符、方法调用等}}

• {{ a }}
• {{a == 10 }}
• {{a > 10}}
• {{a + b + c}}
• {{a.split(‘’).reverse().join(‘’)}}
• {{a > 0 ? “成功” : “失败”}}

// 错误写法
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

// 正确写法
<!-- js表达式 -->
<p>{{ 1 + 2 + 3 }}</p>
<p>{{ 1 > 2 }}</p>
<!-- name为data中的数据 -->
<p>{{ name + ':消息' }}</p> 
<!-- count 为data中的数据 -->
<p>{{ count === 1 }}</p>
<!-- count 为data中的数据 -->
<p>{{ count === 1 ? "成立" : "不成立" }}</p>

<!-- 方法调用 -->
<!-- fn为methods中的方法 -->
<p>{{ fn() }}</p>

基础-术语解释-指令(重要)

• 指令 (Directives) 是带有 v- 前缀的特殊特性。
• 指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
• 指令位置: 起始标签

代码示例:

<p v-text="name">内容</p>

基础-系统指令-v-text和v-html

• 很像innerText和innerHTML

• v-text:更新标签中的内容

• v-text和插值表达式的区别

  • v-text 更新**整个**标签中的内容
  • 插值表达式: 更新标签中局部的内容

• v-html:更新标签中的内容/标签

• 可以渲染内容中的html标签

• 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

<div id="app">
  <!-- v-text指令的值会替换标签内容 -->
  <p>{{str}}</p>
  <p v-text="str"></p>
  <p v-text="str">我是p标签中的内容</p>
  <p v-text="strhtml">我是p标签中的内容</p>
  <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
  <p v-html="str"></p>
  <p v-html="strhtml">我是p标签中的内容</p>
</div>
<script src="./vue.js"></script>
<script>
  new Vue({
      el: '#app',
      data: {
          str: 'abc',
          strhtml: '<span>content</span>'
      }
  });
</script>

基础-系统指令-v-if 和 v-show

使用: v-if 和 v-show 后面跟着表达式的值是布尔值 ，布尔值来决定该元素显示隐藏

注意 : v-if 是直接决定元素 的 添加 或者删除 而 v-show 只是根据样式来决定 显示隐藏

• v-if 有更高的切换开销
• v-show 有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好.

如果在运行时条件很少改变，则使用 v-if 较好.

基础–v-on绑定事件和修饰符

• 使用:
• 第一种:v-on:事件名=“方法名”
  • 第二种:@事件名="方法名"的方式

// v-on:xx事件名='当触发xx事件时执行的语句' 
<button v-on:click="fn">按钮</button>
// v-on的简写方法 
<button @click="fn">按钮</button>

• 修饰符
• 使用:@事件名.修饰符(.修饰符)=“方法名”,可以连写多个修饰符
• .once - 只触发一次回调
• .prevent - 调用 event.preventDefault() 阻止默认事件
• .stop- 阻止事件冒泡
• .self-只有event.target(获取当前元素) 是当前操作的元素时才触发事件

// v-on修饰符 如 once: 只执行一次
<button @click.once="fn">只执行一次</button>
// v-on修饰符 如 prevent: 阻止默认事件
<button @contextmenu.prevent="fn">阻止默认事件</button>
<!-- 只有event.target是当前操作的元素时才触发事件；
<div class="demo1" @click.self="showInfo">//阻止事件冒泡
<button @click="showInfo">点我提示信息</button>
</div>

• 事件对象(扩展)
• 第一种:可以方法名中采用$event的方式传形参
• 第二种:直接写事件名 默认第一个参数为event事件参数

基础-系统指令-v-for(数组)

• v-for 指令基于一个数组来渲染一个列表

• v-for 语法 item in items 或者 item of items

• 其中 items 是源数据数组 而 item 则是被迭代的数组元素的别名。

  // 第一种用法：
  <ul>
    <li v-for="item in items">
      {{ item.name }}
    </li>
  </ul>
  
  // data中的数组
  data: {
      items: [
        { name: '大娃' },
        { name: '二娃' }
      ]
  }
  

   // 第二种用法: v-for 还支持一个可选的第二个参数，即当前项的索引
  <ul>
    <li v-for="(item, index) in items">
       {{ index }} {{ item.name }}
    </li>
  </ul>
  

注意： v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意

**路径**参照代码示例

基础-系统指令-v-for（对象）

第一种用法:

// items 为对象  item为当前遍历属性对象的值
v-for="item in items"

第二种用法:

//item为当前遍历属性对象的值  key为当前属性名 index为当前索引的值
v-for="(item, key, index) in  items"   

**路径**参照代码示例

基础-系统指令-v-for（key属性）（非常重要的面试题）

场景: 列表数据变动会导致 视图列表重新更新 为了提升性能 方便更新 需要提供一个属性 key

//  使用v-for时 建议给每个元素设置一个key属性 （必须加上）
//  key属性的值 要求是每个元素的唯一值 （唯一索引值）
//  好处:vue渲染页面标签 速度快

// 数组
<li v-for="(v,i) in arr" :key="i">{{v}}</li>
// 对象
<li v-for="(v,k,i) in json" :key="i">{{v}}-{{k}}</li>