初学Vue.js

01-Hello Vue初体验

el属性:该属性决定了这个Vue对象挂载在哪个元素上。
data属性:该属性中通常会存储一些数据,这些数据可以是由我们自定义出来的,也可以来自于网络,从服务器加载。
例如:

<div id="app">
    {{message}}
    {{name}}
</div>
<script>
    //let(定义变量)
    // const(定义常量)
   const app= new Vue({
        el:'#app',//用于挂载需要管理的元素
       data:{//定义数据
            message:'你好,我是Vue',
            name:'gethin'
       }
    })
</script>

如上例代码,可在console模式下输入

app.message

即可调出相应的值

02-Vue列表展示

HTML代码中,使用v-for指令,即可遍历整个数组。
而且是响应式,当数组中的数组发生变化时,界面会自动更新。
例如:

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好',
            movies:['泰坦尼克号','大话西游','西游记','盗墓笔记']
        }
    })
</script>

如上例代码,可在console模式下输入

app.movies.push('东游记')

即可添加数组数据,并且页面会自动更新数据显示出来。

03-Vue计数器

methods属性:该属性用于Vue对象中定义方法。
v-on:click指令:(可简写为@click)该指令用于监听某个元素的点击事件,并需要制定当发生点击时执行的方法。
例如:

<div id="app">
    <h2>当前计数:{{count}}</h2>
    <!--方法一
    <button v-on:click="count++">+</button>
    <button v-on:click="count--">-</button>
    -->
    <!--方法二-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            count:'0'
        },
        methods:{
            add:function () {
                console.log("执行了加");
                this.count++
            },
            sub:function () {
                console.log("执行了减");
                this.count--
            }
        }
    })
</script>

如上例,当methods属性内的方法调用data数据时,需要写为

this.count

以此类推。

# Vue  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×