vue（1）

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来修改标签的属性，简写用:

　　　　（1）布尔型 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>

　　　　（2）同时绑定多个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>

　　　　（3）使用 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代码（语句不可以）。

　　　　（4）调用函数

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

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

vue

Vue介绍

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

开发版本：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 @ 2022-09-14 11:39 代码小昕阅读(50) 评论(0) 收藏举报

刷新页面返回顶部

vue（1）

Vue介绍

使用Vue

文本插值

原始HTML

Attribute 绑定

（1）布尔型 Attribute

（2）同时绑定多个Attribute

（3）使用 JavaScript 表达式

（4）调用函数

vue

Vue介绍

使用Vue

文本插值

原始HTML

Attribute 绑定

布尔型 Attribute

同时绑定多个Attribute

使用 JavaScript 表达式

调用函数

computed计算属性

事件处理

条件渲染

列表渲染

表单输入绑定

单行文本

多行文本

复选框

数据双向绑定

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

单选框

选择器

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

修饰符

.lazy

.number

.trim

生命周期

监听器

Vue中的dom

vue脚手架

vue-cli

安装

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

基于vue-cli vueUI创建项目

基于Vite创建Vue项目

组件

新建组件

引入组件

注册组件

注册局部组件（常用）

注册全局组件

使用组件

vue中三种for循环用法

最普遍的一种

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

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

公告

　　　　（1）布尔型 Attribute

　　　　（2）同时绑定多个Attribute

　　　　（3）使用 JavaScript 表达式

　　　　（4）调用函数

`.lazy`

`.number`

`.trim`