vue个人学习笔记

工程简介
vue学习笔记
1.what:
基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、 组件化的编程模型，帮助你高效地开发用户界面。
2.why
为什么要选择vue呢? vue作为前段框架，具有优秀的解耦合能力，为什么这么说呢 因
为vue类似于由组件组合而成的框架，为什么这么说呢？因为vue中可以自定义 组件，比如你设置一个组件，以前你需要用
js或者jQuery去获取id然后再用一些 听都没听过的方法，各种设置，代码只有自己能看懂，而vue采用组件，一个
页面可以 有若干组件，每个组件你都可以独立设置，不会影响其他位置，说道对组件进行设置 vue具有优秀的数据绑定能力，也
就是对dom的操作简化了很多，为你开发节约时间， 也为你今后维护用不着看很多你没见过的方法
3.when
什么时候使用vue，这个不用说
4.where
这个也不用说
5.who
这个也不用说
-----------------------------
vue入门
1.引入依赖
<script src="./vue/vue.js"></script>
2.添加div
<div id="app">
   <h1>site : {{site}}</h1>
   <h1>url : {{url}}</h1>
   <h1>{{details()}}</h1>
</div>
vue中使用{{msg}}这样的双引号的形式设置内容
3.js
var app = new Vue({
   el:"#app",//参数
   data:{//为变量赋值
   site:"菜鸟教程"
   },
   methods:{//配置函数方法
   details:function(){
   return this.site+" -vue学习总结"
   }
   }
})
----------------
常见模板语法
1）插值：{{...}}
2）Html：v-html=""，在data中进行设置
<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>
3）属性：v-bind  用于绑定数据和元素属性的
<!-- 完整语法 -->
<a v-bind:href="url"></a>
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});
<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>
4）指令 v-if
可以判断是否显示组件
5)参数 v-bind
 v-bind:href="url",在参数之后家:
6)双向绑定 v-model，一般多用于双向绑定
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
7）监听时间 v-on
<!-- 缩写 -->
<a :href="url"></a>
v-on:click=""
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
8）循环语句 v-for
v-for="site in sites"
这里的循环可以对数组，json等若干类型数据进行遍历操作
<div id="app">
  <ol>
    <li v-for="site in sites">//通过这样的方式进行循环
      {{ site.name }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
-----------------------------------------
！注：computed vs methods
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。


/////////////////////////////////////////////////////////
vue组件
vue具有自定义组件的功能，这也是vue为何如此大受欢迎的原因
1）注册一个全局组件语法格式如下：
Vue.component(tagName, options)
2）tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

<template>
自定义组件设置
</template>
<script>
js数据设置
</script>
<style>
样式设置
</style>

------------------------------
Vue.js Ajax(axios)
用于数据交互类似于ajax
get请求实例
<div id="app">
  <h1>网站列表</h1>
  <div
    v-for="site in info"
  >
    {{ site.name }}
  </div>
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>

post请求实例
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
-----------------
vue学习注意事项
待定~