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>

表达式:

 

 

 

指令(todo-list)

 

转载于:https://www.cnblogs.com/yzmPython/p/11132977.html

你可能感兴趣的:(Python自学-day36(前端框架--VUE))