Vue学习笔记

环境：

1、在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2、不用下载：<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

<div id="app">
<p>{{ message }}</p>      // {{ }} 用于输出对象属性和函数返回值。
</div>

<script>
var vm = new Vue({
　　el: '#app',  //对应HTML中的DOM元素的ID
　　data: {
　　　　message: 'Hello Vue.js!'
　　},　　

　　methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }

})
</script>

Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $    vm.$.data

Vue.js 语法 

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-on       监听按钮的事件，并对用户的输入进行响应。

v-bind     将该元素的属性与表达式值绑定。

 条件模板

v-if

<div id="app">

　　<div v-if="type === 'A'"> A </div>

　　<div v-else-if="type === 'B'"> B </div>

　　<div v-else-if="type === 'C'"> C </div>

　　<div v-else> Not A/B/C </div>

</div>

v-for

异步加载

使用到 vue-resource 库  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

this.$http.get('get.php',{params : jsonData}) 

methods:{
get:function(){
//发送get请求
this.$http.get('/try/ajax/ajax_info.txt').then(
function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
}
}