vue 的内置方法

步骤

1.引入vue.js文件（）

2.创建模板

3.创建vue对象

1.
<title>插入表达式</title>
<div id="app">
    <!--插入表达式-->
    {{name}}
</div>
  <script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据
        data:{
            name:'小三、小四、小吴、小六'
        }
    })
</script>
2.
<title>v-text</title>
<div id="app">
    <!--v-text-->
    <h1 v-text="name"></h1>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据
        data:{
            name:'小三、小四、小吴、小六'
        }
    })
</script>
3.
<title>v-html</title>
<div id="app">
    <!--v-text-->
    <div v-html="name"></div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据
        data:{
            name:'<p>小桌子</p>'
        }
    })
</script>
4.
<title>v-html</title>
<div id="app">
    <!--v-if-->
    <!--有更高的切换消耗，安全性高  运行条件不可能改变的情况下用v-if-->
    <div v-if="isShow">我是小凳子</div>
    <!--v-show-->
    <!--初始化消耗大，如果需要平凡切换并对安全性没有要求的情况下用v-show-->
    <div v-show="isShow">我是小桌子</div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据(true为 显示，false为隐藏)
        data:{
            isShow:true
        },

    })
</script>
5.
<title>v-html</title>
<div id="app">
    <!--v-for-->
<!--控制HTML的语法-->
    <!--in的前面是一个单项(单个数据)，in的后面是数据（多个数据）-->
    <ul>
        <li v-for="singer in singers">{{singer.no}},{{singer.name}}</li>
    </ul>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据(true为 显示，false为隐藏)
        data:{
           singers:[
               {no:1,name:'AAA'},
               {no:2,name:'bbb'},
               {no:3,name:'ccc'},
               {no:4,name:'ddd'},
               ]
        },

    })
</script>
6.
<title>v-html</title>
<div id="app">
    <!--v-on-->
    <ul>
        <li v-on:click="myClick" style="cursor: pointer">单击</li>
        <li @click="myClick">缩写的点击</li>
    </ul>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        //管理边界
        el:'#app',
        //data存放数据(true为 显示，false为隐藏)
        data:{

        },
        // methods（存放方法）
        methods:{
            myClick:function () {
                console.log('你在点击我哦')
            }
        }

    })
</script>
复制代码