vue基础

vue基础

一、vue基本概念
1、基于数据开发
2、挂载器：el:"#app"，这里#代表id选择器对应的标签

二、vue语法
v-text：设置标签的文本值（textContent）。格式：<h2 v-text="message"></h2>，会替换标签中所有的内容，换成message。
v-html：设置标签的innerHTML。如果是普通文本，则作用和v-text相同；如果是html文本，则解析为html代码。

    <div id="app">
        <p v-html = "context"></p>
        <p>{{context}}</p>
        <p>
            {{htmlText}}<input type="button" value = "点击" @click = "changeText()">
        </p>
    </div>

    <!-- vue逻辑代码 -->
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                context:"<a href = '01-hello-vue.html'>click</a>",
                htmlText:"click me to change"
            },

            methods:{
                changeText:function(){
                    this.htmlText = "wait for change......"
                }
            }
        })
    </script>

v-show：在标签里面设置v-show=true，可以显示该标签对应内容，v-show=false则隐藏。其原理是修改元素的display，实现显示隐藏。
v-if：根据表达式的真假，实现元素的显示和隐藏。类似于上面的语法，单原理是通过操作dom元素实现的。
v-bind：设置元素的属性（例如src，title，class等）。格式：v-bind：属性名=表达式，可以简写为：：属性名=表达式。通过这种方式，可以实现类似src="imgArr[index]"这种基于数据绑定属性的形式。
v-on：绑定事件。格式：v-on：click="method()"，或者简写为：@click="method"的形式。
v-for：根据数据生成列表结构，数组经常与之结合使用，并且数组长度的更新会同步到页面上（响应式）。格式：(item , index) in 数据。

    <div id="app">
        <ul>
            <li v-for="(item , index) in arr">拼写hello {{item}}</li>
        </ul>
        <h3 v-for="(item , index) in objArr">泰坦尼克号{{item.name}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:["h","e","l","l","o"],
                objArr:[
                    {name:"jack"},
                    {name:"rose"}
                ]
            }
        })
    </script>

v-on补充：传递自定义参数，事件修饰符。比如：@keyup.enter="doIt()"表示的是接收到回车键时触发事件。更多的事件修饰符详见：https://cn.vuejs.org/v2/api/#v-on。
v-model：获取和设置表单元素的值（双向数据绑定）。当修改表单元素的值的时候，data中的数据也会改变；修改data中数据的时候，表单元素的值也会同步更改。

<div id="app">
    <input type="text" v-model = "message">
    <h2>{{message}}</h2>
    <input type="button" @click="getM()" value="点击获取当前message的值">
    <input type="button" @click="setM()" value="重新设置当前的message的值">
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        methods:{
            // 获取当前的message
            getM:function(){
                alert(this.message);
            },
            // 设置当前的message
            setM:function(){
                this.message = "world";
            }
        }
    })
</script>