Python自学-day36（前端框架--VUE）

一、安装

使用cnpm install vue安装，请参考本篇博客详细的vue安装说明>>>>>>

安装完成后，在docs命令窗口输入：vue - V(大写) 查看版本

1、测试，创建第一个版本

docs窗口输入：

vue init webpack demo

运行vue，在docs依次输入以下命令:

// 进入项目
cd vue-project
// 安装依赖
cnpm install
// 测试环境是否搭建成功
cnpm run dev

二、Vue基础

2.1、vue之实例

vue本质是个类模板，通过传递参数操作实例，语法如下：

var app = new vue({......})

传递的参数包括：el、data、methods....、通过app.$xx来查看

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="i1">
        <p> {{test}} </p>
        <p> {{kao}} </p>
        <p> {{mtd()}} </p>
    </div>
</body>
<script>
    var ap = new Vue({
        el:'#i1',   //标签id属性
        data:{      //渲染属性
            test:'shabi',
            kao:'canima',
        },
        methods:{
            mtd:function(){
                console.log(521)
            }
        }
    })
</script>

2.2、vue实例之-模板语法

插值（文本、原始html、表达式）

文本：

<body>
    <div id="i1">
        <p>{{cz}}</p>
    </div>
    
    <script>
        var vu = new Vue({
            el:'#i1',
            data:{
                cz:'插值之-文本测试',  //value值注意带引号
            }
        })
    </script>
</body>

html:

<body>
    <div id="i1">
        <p v-html="cz"></p>
    </div>
    
    <script>
        var vu = new Vue({
            el:'#i1',
            data:{
                cz:`<input type='text' value='插值之html' />`,  //注意value值的引号是Esc键下的’~‘符
            }
        })
    </script>
</body>

表达式：

扫描二维码关注公众号，回复： 6818570 查看本文章

指令（todo-list）