走进Vue的第一天

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue入门【uml类图】</title>
    <!--这个js文件一定要在head标签里面引入-->
    <script src="vue.js"></script>
</head>
<body>
<!--
挂载点：相应的vue实例中el中的属性所指向的标签就叫做挂载点
模板：挂载点内部的所有标签代码都叫做模板（挂载点可以写在vue实例中）
实例：vue实例

v-text或者v-html:告诉某一个标签他显示的是由谁来决定的(但是和jquery一样，text只能解析文本，html可以解析标签)

v-on:事件='函数'(可以简写成  @事件='函数')   这个是实现绑定一个事件，同时，这个事件绑定的方法存在于vue实例的methods中
-->
<div id="foo">{{msg}}
    <p v-text="num" @click="My2"></p>
    <p v-html="num" v-on:click="My"></p>
</div>

<div id="bar">
    <h1 v-text="number"></h1>
</div>

<script>
    //可以通过jquery或者原生js的效果来引入vue的效果
    // 引入类文件就可以实现实例化
    // el:表示你要接管页面的哪一个element（元素）
    // data:数据
    new Vue({
        el:"#foo",
        data:{
            msg:"Hello Word",
            num:1
        },
        methods:{
            My:function () {
                alert('绑定点击事件，即将改变值');
                this.num = '你好，通过绑定单击事件这个值已经改变了';
            },
            My2:function () {
                this.num = '简写以后也可以实现的';
            }
        }
    });

    //这里展示的是将模板内容写在vue实例中
    new Vue({
        el:"#bar",
        template:"<h1>你好,{{username}}</h1>",
        data:{
            username:"张三"
        }
    });
</script>
</body>
</html>
猜你喜欢
