Vue学习笔记01-04

一、课程01

//GitHub上获取代码，速度很慢，使用了GitHub代理
git clone https://pd.zwc365.com/seturl/https://github.com/hemiahwu/vue-basic.git

//切换分支课程
git checkout lesson-1*25

二、课程02 el和data的使用

1、vue 官网 https://cn.vuejs.org/
2、安装开发工具vscode
3、安装插件Live Server、Vetur
4、设置-settings，转换为JSON，添加配置

 "editor.formatOnType": true,
 "editor.formatOnSave": true,

5、新建index.html

    
    
    
    
    



    
    

        
hello,{{name}}
        
你的年龄：{{age}}
    

6、新建app.js

//实例化vue对象
new Vue({
    el: '#vue-app',//element
    data() {
        return {
            name: "wing",
            age: "18"
        }
    }
})

7、运行
index.html中邮件Open with Live Server

image.png

三、课程03 methods方法的使用

//实例化vue对象
new Vue({
    el: '#vue-app',//element
    data() {
        return {
            name: "wing",
            age: "18"
        }
    },

    methods: {
        //方法的不同方式
        greet: function () {
            return 'good night';
        },
        //拼接式
        hello() {
            return 'hello ' + this.name;
        },
       //反引号
        haveLunch(rice) {
            return `午饭吃的${rice}`;
        }
    }
})

HTML中调用方法

{{greet()}}
{{hello()}}
{{haveLunch('大米')}}

四、课程04 v-bind属性

标签属性前添加v-bind:或简写为:

 百度

若需对标签进行解析，使用v-html

js中定义：

data() {
        return {
            name: "wing",
            age: "18",
            url: "http://www.baidu.com",
            website: "网易"
        }
    }