Hello JavaScript ——5.1 Vue快速入门

2021-03-02 18:03:27 阅读：145 来源： 互联网

标签：5.1 Vue el JavaScript vm let new message

Vue

Vue是一款渐进式的js框架，所谓渐进式就是逐步实现新特性的意思，比如实现模块化开发、路由、状态管理等新特性，其特点是综合了Angular(模块化)和React(虚拟Dom)的优点

SOC原则(关注点分离)

HTML + SCSS + JS：视图层给用户看的，或者刷新后台发送来的数据

{{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld!</title>
    <!--这里也可以存放-->
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script text=javascript src="../js/main.js"></script>
</body>
</html>

let vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            }
});

{{message}}就是虚拟Dom 不需要人为修改而是绑定变量之后使用 api 接口请求数据即可

现在数据和DOM已经被建立了关联，所有东西都是响应式的，我们在控制台操作对象属性，界面可以实时更新

v-bind 绑定特定元素
v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld!</title>
    <!--这里也可以存放-->
</head>
<body>

    <div id="type">
        <h1 v-if="type==='golang'">golang</h1>
        <h1 v-else-if="type==='cpp'">cpp</h1>
        <h1 v-else="type==='rust'">rust</h1>
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script text=javascript src="../js/main.js"></script>
</body>
</html>

let vm = new Vue({
            el: "#type",
            data: {
                type: "golang"
            }
        }
);

v-for

TYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld!</title>
    <!--这里也可以存放-->
</head>
<body>

    <div id="list">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script text=javascript src="../js/main.js"></script>
</body>
</html>

let vm = new Vue({
            el: "#list",
            data: {
                items: [
                    {message: 'golang'},
                    {message: 'rust'},
                    {message: 'dart'}
                ]
            }
        }
);

处理事件

方法必须定义在 Vue的methods对象中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld!</title>
    <!--这里也可以存放-->
</head>
<body>

    <div id="app">
        <button v-on:click="hello">点击</button>
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script text=javascript src="../js/main.js"></script>
</body>
</html>

let vm = new Vue({
            el: "#app",
            data: {
                message: 'golang'
            },
            methods: {
                hello: function(){
                    alert(this.message);
                }
            }
});

标签：5.1,Vue,el,JavaScript,vm,let,new,message
来源： https://blog.csdn.net/qq_44807796/article/details/114290261

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Hello JavaScript ——5.1 Vue快速入门

Vue