Vue入门学习

Vue 是一套渐进式框架，只关注视图层

---

本文主要参考 菜鸟教程

一、 快速入门

下载vue

• 新建一个HTML页面，并在HTML头部引入vue的js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

• 在body标签里边写入一下代码，需要注意的是 id=app，可以代表Vue的作用域，名称可以自定义

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

• 早id="app"下，实现数据展示

<script>
new Vue({
  el: '#app',// 这里可以想象为 document.getElementById("app");
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

• 以后使用数据绑定显示数据的时候可以如下，防止网上加载慢了，用户看到花括号

<div id="app">  
  <p v-text="message"></p>
</div>

二、Vue语法命令

1. 文本数据插入

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

2. 个人喜欢用这种文本插入方式

<div id="app">
    <div v-text="message"></div>
</div>

3. 方法2，插入的html代码是不编译的，输入什么就展示什么

<div id="app">
    <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>这个h1 会在上边message显示，大标题字体</h1>'
  }
})
</script>

4. 对标签中属性的值进行绑定v-bind

<div v-bind:class="{'class1': use}">
    v-bind:class 指令
    代码中采用键值对的方式记录，class1 为样式表，
    use为布尔类型变量，use为true的时候展示样式表，
    false的时候则不加载样式表
 </div>
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

5. 数据的选项绑定v-model

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '输入框里边数据改变了，p标签里边的数据也会改变'
  }
})
</script>

6. 绑定点击事件

<div id="app">
    <button v-on:click="funs">绑定点击</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    funs: function () {
   		console.log("我被点击了！"); 
    }
  }
})
</script>

7. 缩写
   v-bind 缩写 可以直接省略
   v-on: 可以缩写完成@

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

8. 条件判断语句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>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

9. 循环语句v-for

<div id="app">
  <ol>
    <li v-for="d in datas">
      {{ d.name }}
    </li>
    我们会在页面上看到三个 li标签，里边内容分别为1,2,3
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    datas: [
      { name: '1' },
      { name: '2' },
      { name: '3' }
    ]
  }
})
</script>

<li v-for="(value, key) in object">
	{{ key }} : {{ value }}
</li>

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

<li v-for="n in 10">
     {{ n }}
</li>

三、Vue自定义组件

1. 全局组件（所有实例都能用的全局组件）

<div id="app">
    <liuxingzhumeng></liuxingzhumeng>
</div>
 
<script>
	// 注册
	Vue.component('liuxingzhumeng', {
	  template: '<h1>自定义组件!</h1>'
	})
	// 创建根实例
	new Vue({
	  el: '#app'
	})
</script>

2. 局部组件（只能在这个实例中使用）

<div id="app">
    <liuxingzhumeng></liuxingzhumeng>
</div>
 
<script>
	var Child = {
	  template: '<h1>自定义组件!</h1>'
	}
 
	// 创建根实例
	new Vue({
		  el: '#app',
		  components: {
		    // <runoob> 将只在父模板可用
		    'liuxingzhumeng': Child
		  }
		})
</script>

四、路由（重要）

1. 如果用到路由，则需要引入 两个JS文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>