Vue.js学习记录——一

声明式渲染

在使用Vue.js的时候，最简单的方法就是在html的head标签中加上下面这种方式(选择一种使用)：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，所有的东西都是 响应式 的。
开始入门第一个打印Hello World！

<div id = "app">
    {{message}}
</div>

var app = new Vue({
    el:'#app',
    data:{
        message:'Hello world'
    }
})

除了直接使用之外，还可以使用指令 v-,用来表示Vue提供的特殊特性。例如 悬停响应

<div id = "app1">
    <span v-bind:title="message">
    	鼠标悬停在此处几秒查看此处的信息
    </span>
</div>

var app1 = new Var({
    el:'#app1',
    data:{
        message:'查看到的消息'
    }
})

可以根据自己的需求更改message里的值。

条件与循环

使用v-指令，控制元素在页面上的显示

<div id="app2">
    <p v-if="see">
        你终于看见我了
    </p>
</div>

var app2 = new Vue({
    el:'#app2',
    data:{
        see:true
    }
})

输出结果：

如果将true改为false，页面上就不会显示该信息。

除去条件语句外，vue.js还有循环语句，使用v-for 指令可以绑定数组的数据进行渲染一个列表：

<div id = "app3">
    <ol>
        <li v-for="todo in s">{{todo.text}}</li>
    </ol>
</div>

var app3 = new Vue({
    el:'#app3',
    data:{
        s:[
            {text:'Vue'},
            {text:'java'},
            {text:'jfinal'}
        ]
    }
})

如果在控制台输入app3.s.push({text:'python'})，列表中就会加入python这个项。

处理用户输入

为了让普通用户和你的开发的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用Vue实例中的方法。

<div id="app4">
    <p>
        {{message}}
    </p>
    <button v-on:click="reverseMessage">反转文字</button>
</div>

var app4 = new Vue({
    el:'#app4',
    data:{
        message:'处理用户输入'
    },
    methods: {
        reverseMessage:function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

在reverseMessage方法中，所有的DOM操作都是由Vue处理的，所以我们编写的代码只需要关注逻辑层面就可以了。

Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app5">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app5 = new Vue({
    el:'#app5',
    data:{
        message:'aaaaa'
    }
})