VueVuejs从入门到精通 - 邂逅Vuejs

Posted COCOgsta

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueVuejs从入门到精通 - 邂逅Vuejs相关的知识,希望对你有一定的参考价值。

学习视频来源:B站《Vue、Vuejs从入门到精通》

个人在视频学习过程中也同步完成课堂练习等,现将授课材料与个人笔记分享出来。

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    //编程方式:声明式编程
    const app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: { //定义数据
            message: '你好啊,郭亮!',
            name: 'coderwhy'
        }
    })
    //原始js的做法(编程范式:命令式编程)
    //1.创建div元素,设置id属性
    //2.定义一个变量叫message
    //3.将message变量放在前面的div元素中显示
    //4.修改message的数据:今天天气不错!
    //5.将修改后的数据再次替换到div元素
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数:{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                this.counter++
            },
            sub: function () {
                this.counter--
            }
        }
    })
    //1.拿button元素
    //2.添加监听事件
    //3.
</script>
</body>
</html>

  • View:DOM
  • Model:obj
  • ViewModel

 

 

以上是关于VueVuejs从入门到精通 - 邂逅Vuejs的主要内容,如果未能解决你的问题,请参考以下文章

VueVuejs从入门到精通 - Webpack详解

VueVuejs从入门到精通 - vue-router详解

VueVuejs从入门到精通 - 基本语法

VueVuejs从入门到精通 - 前端模块化

VueVuejs从入门到精通 - Vue CLI详解

VueVuejs从入门到精通 - 组件化开发