标签：el vue 入门 Vue new message data

基本语法

创建入门

<!--创建绑定-->
<div id="app1">
    <p>{{ message }}</p>
</div>

<script>
<!--  创建vue格式  -->
    new Vue({
    //    绑定上面容器
        el:'#app1',
        // date 函数
        data:{
            //message 方法
            message: "第一个vue程序"
        }
    })
</script>

v-band语法

v-band有一种简单写法，:

<div id="app">
    <p>site:{{site}}</p>
    <a :href="url1">url</a>
    <hr>
    <span :title="message">aaaaaa</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message:'hhhhh',
            site: "小白学Java",
            url1: 'https://i.cnblogs.com/'
        },
        methods: {
            details: function () {
                return "小白努力学习";
            }
        }
    })

v-if

<div id="app">
<!--    <h1 v-if="ok">yes</h1>-->
<!--    <h1 v-else>no</h1>-->

    <!--  注意细节 A是字符 -->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // ok:true
            type:'A'
        }
    })
</script>

v-for

<div id="app">
    <li v-for = "item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // 数组使用中括号
            items:[
                //
                {message:"小白学vue"},
                {message:"小白学Java"}
            ]
        }
    })

v-on

<div id="app1">
    <p>{{ message }}</p>
    <button v-on:click = "sayHi()">adf</button>
</div>

<script>
    new Vue({
        el:'#app1',
        data:{
            message: "第一个vue程序"
        },
        // 方法必须定义在Vue 中的method中
        methods:  {
            sayHi: function (){
                alert("hi")
            }
        }
    })

标签：el,vue,入门,Vue,new,message,data
来源： https://www.cnblogs.com/sgbai/p/14403565.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。