Vue快速入门1 2021.12.13

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、引入vue.js

方法1：引入在线链接

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

方法2：下载vue.js，引入本地文件

<script src="./vue.js"></script>

2、页面准备一个容器给vue实例接管

<div id="app">
    <span>{
   
   {msg}}</span>
    <h1>你的年龄是{
   
   {age}},你是{
   
   {text()}}</h1>
    <h2>{
   
   {age<18?'未成年人':'成年人'}}</h2>
</div>

3、vue 实例接管这个容器:new Vue({el:"容器css选择器"})

--vue 实例接管容器的时候会产生一个和容器一样的节点，来替换接管的容器。

const vm = new Vue({
    el:'#app',
    data:{
        msg:'hello world',
        age:12
        }
    methods:{
        text(){
        if(this.age<16){
            return '儿童'
        }else if(this.age<24){
            return '少年'
        }else if(this.age<60){
            return '青年'
        }else{
            return "老年"
            }
        } 
})

1）el：是一个css选择器，是字符串，就是vue实例要接管的元素（只在用 new 创建实例时生效）；

-- 如果没有设置 el 选项，可以通过 vm.$mount('容器 css 选择器')来挂载元素；

-- el 的优先级高于$mount；

2）data属性：可以是一个对象，或者一个函数(),推荐使用函数，可以定义键值对

-- 键名: html里面可以使用的变量名；成员值: 变量值；

-- data里面定义的变量名的独特:变量值改变，视图会自动同步；

-- data里面定义的变量可以在vue实例的$data属性上看到和操作；

3）methods:后面是一个对象，里面可以定义html里面要使用的方法；

-- 在方法内部可以使用data里面的变量；
-- 在方法内部，this指的就是vue实例对象（在vue接管html元素里面，所有的this都可以省略）；
-- 语法: vue实例对象.变量名；

4）template：里面是html字符串，可以用于替换el对应的dom节点

-- template和outerHTML的区别：

- outerHTML就是html，要遵循html的语法规范,不区分大小写， template可以区分大小写；

- template的优先级高于el的outerHTML；

template:`
    <div id="tem">
    <h1>我是template里面书写的内容</h1>
    <h1>{
   
   {msg}}</h1>
    </div>`

5）v-bind：用于绑定数据和元素属性

语法: v-bind:标签的属性名="属性值，属性值是js表达式"

或简写为 :标签的属性名="属性值，属性值是js表达式"

-- vue给属性中的class属性和style属性专门提供了：

数组语法:

v-bind:class="['a','b','c']" //同时有a,b,c三个类名

v-bind:style="[{backgroudColor:'red',border:'30px solid #ccc'},{margin:'30px'}]"

对象语法：

v-bind:class="{a:true,b:false,c:true}" //同时有a,c两个类名，没有b类名

v-bind:style="{backgroudColor:'red',border:'30px solid #ccc'}"

结合使用:

v-bind:class="['a',{b:true},{c:false}]" //同时有a,b两个类名，没有c类名

6) v-on 指令 : 监听 DOM 事件，并在触发时运行一些 JavaScript 代码

写法1:v-on:事件类型 = "事件处理函数"

写法2:v-on:事件类型 = "事件处理函数()"

说明:无论哪种写法，事件处理函数不会立即执行，触发事件时才执行；

v-on可以简写成@

写法1:@事件类型 = "事件处理函数"

写法2:@事件类型 = "事件处理函数()"

-- 事件处理函数里面的this是:当前的vue实例对象

<div  class="movearea" @mousemove="moveHanlder($event)"
v-bind:style="{backgroundColor:`hsl(${x},80%,50%)`}">
</div>

-- 事件处理函数可以传入实参，$event有固定含义，就是事件对象

<button v-on:click="clickHandler($event)">点我试试！！</button>

7）v-if 指令：用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值时被渲染

v-if='js表达式'，经常配合v-else指令使用，v-if不满足的时候，就显示v-else里面的内容；

<!-- 放在单个标签上 -->
<h1 v-if="age>=18">成年人</h1>
<h1 v-else>未成年人</h1>
 <!-- 放在多个标签集合上 -->
<template v-if="age>=18">
     <h1>你是成年人了</h1>
     <h1>你要承担养家糊口的任务了</h1>
     <h1>你不可以过儿童节了</h1>
</template>

v-show ：用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染

v-show='js表达式'

v-if 和 v-show的区别 :

-- v-if 通过插入或者移除实现元素的显示和隐藏，v-show 通过css的display:none/block实现元素的显示和隐藏；

-- v-if 可以用于template元素，v-show 不可以用于template元素；

8）v-for 列表渲染：哪个元素要循环，就在哪个元素上添加v-for指令；

-- v-for要配合key标签属性使用，每个循环的元素的key的值必须是唯一的字符串或者数字；

语法1: v-for="item in arr"

-- item就是循环到的那个数组元素，arr就是要循环的数组；

语法2: v-for = "(item,index) in arr"

-- item就是循环到的那个数组元素，arr就是要循环的数组，index就是循环到的数组元素的下标；

语法3: v-for="val in obj"

-- obj就是要循环的那个数组，val就是循环到的键值对的值；

语法4: v-for="(val,key)in obj"

-- obj就是要循环的那个数组，val就是循环到的键值对的值，key就是循环到的键值对的键名；

语法5: v-for="(val,key,index)in obj"

-- obj就是要循环的那个数组，val就是循环到的键值对的值，key就是循环到的键值对的键名，index就是循环到的键值对的索引，在各个浏览器里面可能表现不同；

<li v-for="(item,index) in list" v-bind:key="index">
   我的名字是{
   
   {item.name}},我的年龄是{
   
   {item.age}}
</li>

Vue快速入门1 2021.12.13

Guess you like