• 周五. 12月 2nd, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

使用pycharm,开发vue项目,vue.js的基本使用

admin

11月 28, 2021

###

1,新建一个项目

2,把vue.js复制一份出来到本地

3,新建一个html,里面引用vue.js

4,学习vue的模板语言,

###

###

###

这种v-开头的,就是vue的指令系统,

###

学习vue的条件和循环:https://cn.vuejs.org/v2/guide/

###

###

###

学习事件绑定,@click—–v-on:click

学习属性绑定,:style—–v-bind:style

学习数据绑定,v-model,

###

###

###

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1,引入vue的包-->
<script src="./vue.js"></script>

<div id="app">
    <!--模板语法-->
    <h2>{{msg}}</h2>
    <p v-show = "seen">show</p>
    <p v-if = "seen">if</p>
    <ol>
        <li v-for = "data in datalist">
            {{data.index}}{{data.name}}-----{{data.age}}
        </li>
    </ol>

    <button @click = "add()">加1</button>
    <div>{{ count }}</div>

    <div style=" 100px; height: 100px;border: 1px solid #000" :style = "bgcolor"></div>

    <input type="text" v-model = "text">
    <button @click ="showText()">打印</button>

</div>

<script>
    // 实例化对象
    new Vue({
        el:'#app', //元素绑定
        //数据属性
        data:{
            msg: 'hello vue',
            seen: true,
            datalist:[
                {name:"张三",age:18},
                {name:"李四",age:20},
                {name:"王二",age:22}
            ],
            count:1,
            bgcolor:{
                backgroundColor:"#ccc"
            },
            text:123
        },
        methods:{
            add(){
                this.count++
            },
            showText(){
                console.log(this.text)
            }
        }
    })

</script>

</body>
</html>

####

###

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注