vue学习笔记

1.在vue中写出hello，world

<body>
    <div id="root">
        <p>hello,{{nihao}}</p>
    </div>
    

<script type="text/javascript" src="../vue2.6.14.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            nihao: 'world'
        }
    })
</script>
</body>

2.v-bind

用处：设置元素的属性（src，title，class）

v-bind:属性名=表达式

<body>
    <div id="root">
        <p>hello,{{nihao}}</p>
        <img v-bind:src="imgSrc">
    </div>
    

<script type="text/javascript" src="../vue2.6.14.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            nihao: 'world',
            imgSrc: 'https://图片地址.jpg',
        }
    })
</script>

3.v-on

用处：为元素绑定事件

v-on:事件名='方法名'

<body>
    <div id="root">
        <p>hello,{{nihao}}</p>
        <!-- <img v-bind:src="imgSrc"> -->
        <input type="button" value="事件绑定" v-on:click="doIt">
    </div>
    

<script type="text/javascript" src="../vue2.6.14.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            nihao: 'world',
            imgSrc: 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e2bdbc4af3a4ec4a04931ea33e70b62~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp',
        },
        methods:{
            doIt: function clicked(){
                alert('v-onTest')
            }
        }
    })
</script>
</body>

4.非单文件组件

基本步骤有三步：1.创建组件 2.注册组件 3.使用组件创建组件：

const school = Vue.extend({//对象
        // el:'#root', //函数
        template:`
            <div>
                <h2>学校： {{name}}</h2>
                <h2>地址： {{adress}}</h2>
            </div>
        `,
        data(){
            return {
                name: '西电',
                adress: '兴隆路'
            }
            
        },
    })

注册组件(局部注册)：

new Vue({
        el:'#root',
        components:{
            school:school,
            xuesheng:student
        }
    })

(全局注册)：

<div id="root">
        <hello></hello>
    </div>
  //创建hello组件
    const HelloComponet = Vue.extend({
        template:`
            <div>
                <h1>HelloComponentTest</h1>
            </div>
        `,
        data(){
            return{
                name:'Alex'
            }
        }
    })

    Vue.component('hello',HelloComponet)//第一个参数是赋予的组件名，第二个是实际组件的名称

使用组件：

<div id="root">
        <xuesheng></xuesheng>
        <school></school>
    </div>

5.嵌套组件

1.在哪注册？在被嵌套组件里 school注册在HelloComponet中 2.在哪使用？在被嵌套组件里

const HelloComponet = Vue.extend({
        template:`
            <div>
                <h1>HelloComponentTest</h1>
                <school/>
            </div>
        `,
        data(){
            return{
                name:'Alex'
            }
        },
        components:{
            school
        }
    })

6.单文件组件

首先创建一个Componet文件夹，在里面把template,script,css都写上

<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName"></button>
    </div>
    <!-- 模板 -->
</template>

<script>
    export default {
        name:'School',
        data(){   //对象里可以直接放进函数
            return {
                schoolName: '西电',
                address: '兴隆路'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    }
</script>

<style>
    .demo{
        background-color: orange;
    }
</style>

这个组件需要在script里通过export暴露出去，然后新建一个App组件，在里面的script中import刚创建的Student组件

<template>
    <div>
      <Student/>
    </div>
</template>

<script>
    import Student from "./student";
    export default {
        name: 'App',
        components: {
            Student
        }
    }
</script>

新建一个index.js或者main.js接受App组件

import App from './componet/App.vue'

new vue({
    el: '#root',
    template:`<App></App>`,
    components: {
        App
    },
})

最后新建一个main.html,或者index.html,就可以显示这个组件了。