vue（1）

Vue介绍

vue分为两个版本，开发版本development和产生版本production

开发版本：vue.js里，有注释，有空格，有换行等，并且有提示，尤其是错误提示。

生产版本：vue.js被压缩成了一行，所有不必要的注释/换行/空格等，都被删除，而且删除了所有的提示，目的是为了减小项目体积，使打开页面更快，项目上线时用。

使用Vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue-->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <!--新建app-->
<div id="app">
    <!--6.双大括号展示数据-->
    <button @click="count++">Count is:{{count}}</button>
</div>
 
    <script>
    /*    Vue={
            createApp:function (obj) {
 
            }
        }*/
        //导入createAPP
        const {createApp}=Vue//ES6对象的解构赋值
        createApp({
            data(){//ES6对象的解构赋值（函数）
                return{
                    count:0//4.创建数据
                }
            }
        }).mount('#app')//5.挂载到数据
        /*Vue.createApp({
            data:function (){
                return{
                    count:0
                }
            }
        }).mount('#app')*/
    </script>
</body>
</html>

文本插值

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <!--    最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)-->
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    msg:'Hello,World!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

　　js中的数据，展示在界面上，相当于原生js中的innerText方法

原始HTML

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>我会{{msg}}了</p>
    <p>我会<span v-html="msg"></span>了</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    msg:'<strong>Vue</strong>'
                }
            }
        }).mount('#app')
     
    </script>
</body>
</html>

　　本指令相当于原生js中的innerHTML

Attribute 绑定

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p v-bind:id="idName">我会了</p>
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt="">
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   idName:'txt',
                    imgUrl:'https://pics0.baidu.com/feed/6c224f4a20a446236e18fcf813a7af040ef3d7ee.jpeg?token=4d402e4369444439d866bf756075920b'
                }
            }
        }).mount('#app')
 
    </script>
</body>
</html>

　　v-bind来修改标签的属性，简写用:

　　　　（1）布尔型 Attribute

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <audio src="" :controls="ctl"></audio>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   ctl:false
                }
            }
        }).mount('#app')
 
    </script>
</body>
</html>

 

　　　　（2）同时绑定多个Attribute

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <div v-bind="obj">24235</div>
    <div :="obj">简写成:也可以</div>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   obj:{
                       id:'textId',
                       className:'textClass'//注意：class名在js中要写成className，在这里用class或className都可以
                       title:'我是title'
                   }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

　　　　（3）使用 JavaScript 表达式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>number:{{num+1}}</p>
   <p>小明本次考试{{scoreNum<60?"不及格":"价格"}}</p>
<!--    这里必须是表达式-->
    <p :id="`list-${id}`">{{message.split('').reverse().join('')}}</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    num:0,
                   scoreNum:59,
                    message:'Hello,world!',
                    id:1
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

　　注意：每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（语句不可以）。

　　　　（4）调用函数

　　可以在绑定的表达式里调用函数，但非常不建议如此去做，可以使用Math或Date等全局暴露的函数。

?
1
<p>生成一个随机数{{Math.random()}}</p>

　　


vue

Vue介绍

 

vue分为两个版本，开发版本development和产生版本production

开发版本：vue.js里，有注释，有空格，有换行等，并且有提示，尤其是错误提示。

生产版本：vue.js被压缩成了一行，所有不必要的注释/换行/空格等，都被删除，而且删除了所有的提示，目的是为了减小项目体积，使打开页面更快，项目上线时用。

使用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue-->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <!--新建app-->
<div id="app">
    <!--6.双大括号展示数据-->
    <button @click="count++">Count is:{{count}}</button>
</div>
​
    <script>
    /*    Vue={
            createApp:function (obj) {
​
            }
        }*/
        //导入createAPP
        const {createApp}=Vue//ES6对象的解构赋值
        createApp({
            data(){//ES6对象的解构赋值（函数）
                return{
                    count:0//4.创建数据
                }
            }
        }).mount('#app')//5.挂载到数据
        /*Vue.createApp({
            data:function (){
                return{
                    count:0
                }
            }
        }).mount('#app')*/
    </script>
</body>
</html>

文本插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <!--    最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)-->
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    msg:'Hello,World!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

js中的数据，展示在界面上，相当于原生js中的innerText方法

原始HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>我会{{msg}}了</p>
    <p>我会<span v-html="msg"></span>了</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    msg:'<strong>Vue</strong>'
                }
            }
        }).mount('#app')
    
    </script>
</body>
</html>

本指令相当于原生js中的innerHTML

Attribute 绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p v-bind:id="idName">我会了</p>
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt="">
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   idName:'txt',
                    imgUrl:'https://pics0.baidu.com/feed/6c224f4a20a446236e18fcf813a7af040ef3d7ee.jpeg?token=4d402e4369444439d866bf756075920b'
                }
            }
        }).mount('#app')
​
    </script>
</body>
</html>

v-bind来修改标签的属性，简写用:

布尔型 Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <audio src="" :controls="ctl"></audio>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   ctl:false
                }
            }
        }).mount('#app')
​
    </script>
</body>
</html>

同时绑定多个Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <div v-bind="obj">24235</div>
    <div :="obj">简写成:也可以</div>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   obj:{
                       id:'textId',
                       className:'textClass'//注意：class名在js中要写成className，在这里用class或className都可以
                       title:'我是title'
                   }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

使用 JavaScript 表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>number:{{num+1}}</p>
   <p>小明本次考试{{scoreNum<60?"不及格":"价格"}}</p>
<!--    这里必须是表达式-->
    <p :id="`list-${id}`">{{message.split('').reverse().join('')}}</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    num:0,
                   scoreNum:59,
                    message:'Hello,world!',
                    id:1
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

注意：每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（语句不可以）。

调用函数

可以在绑定的表达式里调用函数，但非常不建议如此去做，可以使用Math或Date等全局暴露的函数。

    <p>生成一个随机数{{Math.random()}}</p>

computed计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{reverseStr}}</p>
    <ul>
        <li>{{text.split('').reverse().join('')}}</li>
        <li>{{text.split('').reverse().join('')}}</li>
        <!--上面两行，同样的功能要计算两次，消耗性能，并且导致HTML代码臃肿，下面用计算属性更优-->
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
    </ul>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    text:'Hello,world!'
                }
            },
            computed:{
                reverseStr(){//这里一定要指定this.text,this指的是当前实例，可以理解为data里的数据
                    return this.text.split('').reverse().join('')
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{count}}</p>
    <button v-on:click="increment()">+</button>
    <button @click="increment()">+</button>
    <button v-on:click="decrement()">-</button>
    <button @click="decrement()">-</button>

    <button v-on:click="increment(5)">+5</button>
    <button v-on:click="increment(6)">+6</button>
    <button v-on:click="decrement(5)">-5</button>
    <button v-on:click="decrement(6)">-6</button>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    count:0
                }
            },
            computed:{//计算属性

            },
            methods:{//方法
                increment (a=1) {
                    // this.count=this.count+a
                    this.count+=a
                },
                decrement (a=1) {
                    this.count-=a
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

计算属性VS方法

注意：计算属性和方法，在确定上确实是相同的，然而不同之处在于计算属性会基于其响应式依赖的缓存。一个计算属性仅会在其响应式依赖更新时才会被重新计算。

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-if="type==='A'">AAAA</li>
        <li v-else-if="type==='B'">BBBB</li>
        <li v-else>CCCC</li>
    </ul>
    <p v-show="seen">现在你看的到我</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    type:'B',
                    seen:false
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <td>id</td>
            <td>书名</td>
            <td>价格</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(book,index) of books":key="index">
<!--            key一般是数据库里的数据上的唯一且不重复的主键——即id-->
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.price}}</td>
        </tr>
        </tbody>
    </table>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    books:[
                        {id:0,name:'三体',price:68},
                        {id:1,name:'平凡的世界',price:128},
                        {id:1,name:'围城',price:48}
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

表单输入绑定

单行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<!--    <input type="text" :value="text" @inout="ipt($event)">-->
    <input type="text" v-model="text">
    <p>{{text}}</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   text:'Hello,world!'
                }
            },
 /*           methods:{
                ipt(event){
                    this.text=event.target.value
                }
            }*/
        }).mount('#app')
    </script>
</body>
</html>

多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <textarea name="" id="" v-model="message"></textarea>
<!--    多行文本，及换行符，可以被v-model实时修改数据-->
    <span>Musnfjbj</span>
<!--    此css属性可以展示字符串中的换行符-->
    <p style="white-space: pre-line;">{{message}}</p>
</div>


</body>
</html>
<script>
   const {createApp}=Vue
    createApp({
        data(){
            return{
                message:''
            }
        }
    }).mount('#app')
</script>

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <label for="ipt"></label>
    <input type="checkbox" id="ipt" :checked="checked">数据单向绑定，data驱动UI，UI不可以修改data
    <p>{{checked}}</p>
</div>


</body>
</html>
<script>
  const {createApp}=Vue
  createApp({
        data(){
            return{
                checked:false
            }
        }
    }).mount('#app')
</script>

数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <label for="ipt"></label>
    <input type="checkbox" id="ipt" v-model="checked">
    <p>{{checked}}</p>
</div>


</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                checked:true
            }
        }
    }).mount('#app')
</script>

将多个复选框绑定到同一个数组或集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{checkedNames}}</h2>
    <input type="checkbox" v-model="checkedNames" value="Jack">Jack
    <input type="checkbox" v-model="checkedNames" value="John">John
    <input type="checkbox" v-model="checkedNames" value="Mike">Mike

</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                checkedNames:[]
            }
        }
    }).mount('#app')
</script>

单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{picked}}</h2>
    <input type="radio" v-model="picked" value="1">男
    <input type="radio" v-model="picked" value="2">女
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                picked:1
            }
        }
    }).mount('#app')
</script>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
               selected:''
            }
        }
    }).mount('#app')
</script>

注意：如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

多选 (值绑定到一个数组)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>

    <select v-model="selected" multiple>
        <option>Aaaaaaaa</option>
        <option>Bbbbbbbb</option>
        <option>Cccccccc</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
               selected:[]
            }
        }
    }).mount('#app')
</script>

修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.lazy="message">
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

.number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.number="message">
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

生命周期

组件生命周期图示

 

监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message"><p>{{name}}</p>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    const vm=createApp({
        data(){
            return{
                message:'1111',
                name:'xxxx'
            }
        },
        watch:{
            message(){//要监听哪个数据，就对应哪个
                //console.log('message changed')
                if(this.message.length>=10)alert('long')
            }
        }
    }).mount('#app')
</script>

Vue中的dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
   <div id="test" ref="test"></div>
    <button @click="big">变大div</button>
    <input type="text" ref="ipt">
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    const vm=createApp({
        data(){
            return{

            }
        },
        methods:{
            big() {
                //原始js方法，极不建议
                /*const test=document.getElementById('test')
                test.style.width='200px'*/
                console.log(this.$refs)/对象
                this.$refs.test.style.width='200px'
            }
        },
        setup(){
            console.log(this.$ref)
        },
        beforeCreate(){
            console.log(this.$ref)
        },
        created(){
            console.log(this.$ref)
        },
        beforeMount(){
            console.log(this.$ref)
        },
        mounted(){
            console.log(this.$ref)
        },
        beforeUpdate(){
            console.log(this.$ref)
        },
        updated(){
            console.log(this.$ref)
        }

    }).mount('#app')
</script>

vue脚手架

vue-cli

安装

#首先确保已安装node和npm
node -v
nopm -v
#其次确保npm镜像地址是国内的淘宝镜像（有梯子除外）
npm config get registry
#如果结果是：https://registry.npmmirror.com/,则说明是淘宝镜像，否则需要改成淘宝，命令如下：
npm config set registry https://registry.npmmirror.com/

#再次安装vue-cli,命令如下：
npm i -g @vue/cli
#查看vue-cli安装版本
vue -V

基于vue-cli创建vue3.0项目

vue create hello-world#项目名称必须是小写英文字母
Manally select features#手动选择分支
Babel#仅选择babel（上下键切换，空格选择/取消，回车确认
Choose a version for Vue?#3.x
where do you? #In dedicated config files保存到另外文件中即不保存到package.json中（package.json内容够多了)
Save this as a preset?#No 不保存为未来分支

Loading......

cd hello-world
npm run serve

#复制网址到浏览器打开即可

基于vue-cli vueUI创建项目

非常不建议使用，丢人现眼！

基于Vite创建Vue项目

基于vite，不需要安装，只要有node和npm即可，但是node版本要在15.0以上。

$ npm init vue@latest

 

项目目录

vue-project
----.vscode              配置vscode,没用
----node_modules
----public
----src             关键，程序员写的代码都在这里面
------assets        项目所需的静态文件，图片，css，等
------components    组件文件夹
------App.vue       根组件
------main.js
----.gigtignore     git上传时，不要的文件配置
----index.html      页面，仅包含一个#app
----package.json
----package-lock.json
----README.md
----vite.config.js   vite配置文件

组件

组件是vue这种框架的基石，是最重要的部分。

组件树

新建组件

在vite创建的项目中创建组件：

在components文件夹下，右键新建.vue文件，就是一个组件

<template>
<p>
    这里面写标签
    外层的template仅做辅助编译，将来生成的html文件界面中，不能存在template标签
    </p>
<div>
    在过去，vue2中，这里的跟标签必须仅能有一个（即template的亲儿子只能有一个），vue3不做限制
    </div>
</template>

<script>
//这里面写js
    export default{//对外暴露，ES模块化语法，等同于node中commonJS中的node.exports
        name:'Helloworld',
        data(){
            return{
                message:''
            }
        }
    }
</script>

<style scoped>
/*这里是css
    这里的scoped，通过给被选中的标签生成独一无二的随机属性名来让当前css仅在本组件中生效*/
</style>

引入组件

在父组件中引入组件

<template>
    
</template>

<script>
    import HelloWorld from "./components/HelloWorld.vue"
    //编辑器可能会把.vue省略掉，一定要加上
    //如果在vue-cli里面，可以不加.vue后缀
    export default {
        name:"Header-1",
    }
</script>

<style scoped>

</style>

注册组件

注册组件分两种,分别是注册局部组件和注册全局组件。

注册局部组件（常用）

<template>
    
</template>
​
<script>
    import HelloWorld from "./components/HelloWorld.vue"
    //编辑器可能会把.vue省略掉，一定要加上
    //如果在vue-cli里面，可以不加.vue后缀
    export default {
        name:"Header-1",
        components:{
            //HelloWorld:HelloWorld
            HelloWorld
        }//注册组件
    }
</script>
​
<style scoped>
​
</style>

注册全局组件

import { createApp } from 'vue'
import App from './App.vue'
​
//import './assets/main.css'
import Header1 from './components/Header-1'//引入
​
createApp(App)
    .component('Header1',Header1)//全局注册
    .mount('#app')

使用组件

父组件

<template>
<HelloWorld></HelloWorld>
    <HelloWorld/>
<helloWorld></helloWorld>
    <helloWorld>
</template>

注意：在组件中没有内容时，才可以改写成单标签

vue中三种for循环用法

最普遍的一种


       for (let i = 0; i < this.books.length; i++) {
         totalPrice += (this.books[i].price) * (this.books[i].count);
       }

比第一种简单方便一点，但我们还是需要通过索引去拿到值

for (let i in this.books) {
    console.log(i); //打印结果为books的索引
    totalPrice += (this.books[i].price) * (this.books[i].count);
}

最高效的，直接取到数组里面的对象

for (let item of this.books) {
    totalPrice += item.price * item.count;
}
 
posted @   代码小昕  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
· vue（2）
· ES6新特性
· 谷粒商城之分布式基础
· Vue的基础知识
· Vue.js-教程
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae