Vue（初识一）

Vue（初识一） 1. Vue是什么2. Vue能做什么3. vue 特点4. Vue-API5. Vue 三种安装方式6. Vue的HelloWorld7. 实例选项-el介绍8. 实例选项-data介绍9. 实例选项-methods介绍10. 插值表达式11. 系统指令介绍11.1 系统指令v-text和v-html11.2 系统指令v-if 和 v-show11.3 系统指令v-on绑定事件11.4 系统指令v-for(数组)11.5 系统指令v-for（对象）11.6 系统指令-v-for（key属性）

1. Vue是什么

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架，旨在更好地组织与简化Web开发。

目前前端 必备 技能传统方式已经不能适应目前越来越 复杂 的开发需求用vue的开发方式会简单、高效 三大框架(vue、react、angular) 2. Vue能做什么

Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量；

不用 *** 作DOM单页面应用web项目(SinglePageApplication 项目，例如https://worktile.com/）简称:SPA传统网站开发 一般来说 需求不大当下各种新框架都采用了类似Vue或者类似React的语法去作为主语法, 微信小程序/MpVue… 3. vue 特点 数据驱动视图 可以让我们只关注数据MVVM 双向绑定通过 指令 增强了html功能组件化 复用代码开发者一般只需要关注数据 4. Vue-API

Vue官方文档
Vue开源项目汇总
Vue.js中文社区
所有关于Vue的问题都可以通过查阅文档解决

5. Vue 三种安装方式 直接下载源码然后通过路径引入
开发版本：https://vuejs.org/js/vue.js
生产版本：https://vuejs.org/js/vue.min.js在线cdn引入的方式

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

采用 npm 安装的方式

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

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

6. Vue的HelloWorld

步骤 :

body中,设置Vue管理的视图 引入vue.js实例化Vue对象new Vue();设置Vue实例的选项:如el、data…new Vue({选项:值});在 中通过{{ }}使用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>

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

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

8. 实例选项-data介绍

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

data中的值{数据名字:数据的初始值}data中的数据msg/count 可以在视图中通过{{msg/count}}访问数据data中的数据也可以通过实例访问 vm.msg或者vm.$data.msgdata中的数据特点:响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

<script>
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)
</script>

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

<script>
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)
}
}
})
</script>

10. 插值表达式 作用:会将绑定的数据实时的显示出来形式: 通过 {{ 插值表达式 }} 包裹的形式用法:{{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>

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

代码示例:

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

11.1 系统指令v-text和v-html 很像innerText和innerHTMLv-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>

11.2 系统指令v-if 和 v-show

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

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

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

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

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

 <div id="app">
        <p v-if="isShow">我是if</p>
        <p v-show="isShow">我是show</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        })
    </script>

11.3 系统指令v-on绑定事件

使用:

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

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

修饰符：
使用:@事件名.修饰符=“方法名”
.once - 只触发一次回调
.prevent - 调用 event.preventDefault() 阻止默认事件

// v-on修饰符 如 once: 只执行一次
<button @click.once="fn">只执行一次</button>
// v-on修饰符 如 prevent: 阻止默认事件
<button @contextmenu.prevent="fn">阻止默认事件</button>

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

    <div id="app">
        <button v-on:click="add">增加</button>
        <button @click="add">增加</button>
        <button @click.once="add">增加</button>
        <button @contextmenu.prevent="add">增加</button>
        <button @click="add($event)">事件对象</button>
        <button @click="add1">事件对象</button>
        <p>{{count}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                add(e) {
                    console.log(e)
                    this.count += 1
                },
                add1(e) {
                    console.log(e)
                }
            }
        })
    </script>

11.4 系统指令v-for(数组) v-for 指令基于一个数组来渲染一个列表v-for 语法 item in items 或者 item of items其中 items 是源数据数组 而 item 则是被迭代的数组元素的别名。

 <div id="app">
       // 第一种用法：
    <ul>
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>

// 第二种用法: v-for 还支持一个可选的第二个参数，即当前项的索引
      <ul>
        <li v-for="(item, index) in items">
        {{ index }} {{ item.name }}
        </li>
      </ul>
  </div>
    
    <script src="./vue.js"></script>
    
    <script>
        new Vue({
            el: '#app',
           // data中的数组
           data: {
             items: [
              { name: '小李' },
              { name: '小芳' }
                    ]
                 }
        })
    </script>

v-for写的位置 应该是重复的标签上 不是其父级元素上 需要注意 11.5 系统指令v-for（对象）

第一种用法:

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

第二种用法:

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

11.6 系统指令-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>

    <div id="app">
        <p v-for="item in list">{{item}}</p>
        <p v-for="(item,index) in list" :key="index">{{item}}---{{index}}</p>
        <p v-for="item in json">{{item}}</p>
        <p v-for="(item,key) in json">{{item}}--{{key}}</p>
        <p v-for="(item,key,index) in json">{{item}}--{{key}}--{{index}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ['a', 'b', 'c'],
                json: {
                    name: '铁蛋儿',
                    age: 18
                }
            }
        })
    </script>