Vue学习笔记——逆战_vue 中使用dd-CSDN博客

本文链接：https://blog.csdn.net/DD_skriy/article/details/104496766

一、Vue的安装

直接下载

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

命令行工具vue cli Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

 npm install ‐g @vue/cli

二、Vue中组件的使用

全局

<body>
    <div id="app">
        <navbar></navbar>
    </div>
</body>
<script>
Vue.component("navbar",{
	template:`
    <div>
    	全局自定义组件
    </div>
    `,
})
new Vue({
	el:"#app",
})
</script>

局部

Vue.component('navb', {
        template: `
        <nav>
            <navb1></navb1>
        </nav>
        `,
        //局部定义组件
        components: {
            navb1: {
                template: `
                <div>
                	我是局部定义的
                </div>
                `
            }
        },
    })

三、Vue中简单指令

1、v-bind
v-bind指令用于动态绑定DOM元素的属性，可以缩写成" : " 。任何属性方法需要动态获取都可以使用“：”

<!-- v-bind动态绑定属性 -->
        <div v-bind:class="isRed?'myyellow':'myred'">123</div>
        <a :class="isRed?'myyellow':'myred'">123</a>
        var vm =new Vue({
    el:'#app',
    data:{
        mycolor:'myyellow',
        isRed:true,
    },
})

</script>

2、v-on
v-on指令用于绑定监听事件，可以简写@。下面用click事件进行举例，点击1/点击2进行输出

<!-- v-on绑定事件 -->
        <button v-on:click='handClick()'>点击1</button>
        <button @click='handClick()'>点击2</button>
        var vm =new Vue({
    el:'#app',
    data:{
        myname:'1111',
        mycolor:'myred',
        isRed:true,
    },
    methods:{
        handClick(){
            console.log(6666)
        }
    }
})

3、v-model
v-model 指令用于表单的双向绑定。在input中绑定v-model可以很轻松的获取到input中的value的值。

<body>
    <div id="app">
      <input type="text"  v-model='mymodel'  @input="app()">
    </div>
</body>

<script>
var vm =new Vue({
    el:'#app',
    data:{
    mymodel:''
    },
    methods:{
        app(){  
       console.log(this.mymodel)
       // 直接获取到input中的val值
            }
        }
})
</script>

4、v-for
v-for指令用于遍历循环数组数据，实现列表类的渲染，一般情况下遍历列表后需要加：key值，代表唯一的id。

<body>
    <div id="app">
        <!-- v-for循环 -->
        <ul>
            <li v-for='(item,index) in mylist' ：key="index">{{item}}</li>
        </ul>
    </div>
</body>

<script>
var vm =new Vue({
    el:'#app',
    data:{
    mylist:['111','222','333'],
    }
})
</script>

5、v-show
v-show指令动态显示/隐藏，根据属性值true/false控制元素是否被渲染在页面上。例如myshow属性值为true,p标签显示在页面上，myshow属性值为false，p标签不会被渲染出来。

<body>
    <div id="app">
        <p v-show='myshow'>我是v-show</p>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            myshow:true
        }
    })
</script>

6、v-if
v-if指令动态创建/删除元素模块，根据属性值true/false控制元素是否被渲染在页面上。例如myif属性值为true,p标签显示在页面上，myif属性值为false，p标签不会被渲染出来。

<body>
    <div id="app">
        <p v-if='myif'>我是v-if</p>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            myif:true
        }
    })
</script>