vue前端开发---笔记

data数据对象

vue使用到的数据存放在data中。

<script>
    var app = new Vue({
        el:"#app"  //指定到对应元素中使用，一般会放在div中，不放在html和body中，所放的元素，子元素也可以引用该值。
        data:{
            message:"-----------"
        }
    })
</script>

v-text指令

message值设置在打他中。

<div id="app">
    <h2 v-text="message"></h2> //可以添加为表达式
    <h2>{{message}}</h2>
</div>

v-html指令

可以对message值进行html解析，使用方法于v-text一致。

v-on指令

绑定对应的事件。

<div id="app">
<input type="button" value="事件绑定" v-on:click="doit"> //在v-on中除了点击，还有一些其他的方法，比如双击dblclick等，这些也可以简写为@click。
//在v-on中可以放函数，通过单击传输参数。也可以进行事件修饰符，比如v-on:click.enter="",形式：.修饰符。
</dic>

<script>
    var app = new Vue({
        el:"#app"
        methods:{
            doit:function(){
            //内容 alert("-----")
            }
        }
    })
</script>

v-show指令

根据表达式的真假，切换元素的显示和隐藏。

<div id="app">
<input type="button" value="切换显示状态" v-on:click="doit">
<img v-show="show" src="...">  //都会解释为布尔值，也可以直接用表达式来判断。v-show=“age>18”
</dic>

<script>
    var app = new Vue({
        el:"#app"
        data:{show:ture}
        methods:{
            doit:function(){
            //内容 alert("-----")
            }
        }
    })
</script>

v-if指令

使用方法与v-show类似

(show)一个操作样式，(if)一个操作元素。

v-bind指令

设置元素的属性。解析值，如src，title，class。

<img v-bind:src="imgsrc">
//data中设置src的地址即可。imgsrc：“http....”

v-for指令

根据数据生成列表结构。

利用数组：[ ]

<li v-for="(it,index) in arr"> //原则上是不停返回模板，但是存在index，it数据，因此返回会根据他们的值进行返回。
    {{index+1}}----{{it}}
</li>

数组设置在data中。

v-model指令

获取和设置表单元素的值（双向数据绑定）。

<div id="app">
<input type="text" v-mpdel="show"/>  //无论是data中show的值或者这里的值发生改变，都会改变。
</div>

<script>
    var app = new Vue({
        el:"#app"
        data:{show:"1111"}
    })
</script>