Vue(一):基础知识

1.vue基础
2.vue指令
3.vue的组件

1.vue基础结构

如何创建一个Vue示例：
new Vue()实例化，其传入参数是一个对象，我们回忆一下js中的对象到底应该怎样规范书写？

// javascript对象的规范写法
let person = {  //这里的person称为对象
    firstName:"Bill",  //  这是属性
    lastName:"Gates", 
    age:62, 
    eyeColor:"blue",
    fullName : function() {  // 这就是对象中方法的标准写法
        return this.firstName + " " + this.lastName;
    }
};
person.fullName();

vue配置常用的属性和方法：

• el: Vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。
• data: 数据存储地方，data的类型可以是object，但在组件（component）里的定义的data必须是方法类型的，且需要使用return返回包裹的数据 => 详细缘由
• computed:数据类型是对象object，也称为计算属性。计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。
• created: 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• mounted: 数据类型是function。在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
• methods: 必须要有一定的触发条件才能执行，如点击事件
• watch: 它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

// 实例化一个Vue示例对象，并介绍基本结构
let app = new Vue({
    el:"#app",
    data:{},
    computed:{},
    created(){
        // vue的函数写法一
    },
    mounted:function() {
        // vue的函数写法二
    },
    methods:{},
    watch:{} 
})

2.vue指令

指令(Directives)是带有v-前缀的特殊attribute，常用指令：

v-bind单向绑定

1. 属性绑定，语法 v-bind:属性名="常量||变量名"

<!--元素绑定：这里的href是参数，是将url的值绑定到href上，类似于赋值-->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

2. HTML Class绑定：将v-bind用于class和style时，表达式结果的类型除了字符串之外，还可以是对象或数组

对象语法：

html:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

Vue.js:
data: {
  isActive: true,
  hasError: false
}
结果渲染为：
<div class="static active"></div>

数组语法：

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
渲染结果为：
<div class="active text-danger"></div>

同时，单向绑定的数组语法也支持使用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

3. 绑定内联样式Style

对象语法：
CSS property名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来)来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

# 写法二：这样会让模板更清晰
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
    baseStyles: {
        color: 'green',
        fontSize: '30px'
    },
    overridingStyles: {
        'font-weight': 'bold'
    }
}

v-if/show条件渲染

语法：v-if...v-else-if...v-else

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；而v-show只是进行简单的CSS样式display切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

<h1 v-show="ok">Hello!</h1>
data: {
    ok: false
}

v-for循环指令

v-for 指令需要以 site in sites 形式的特殊语法，它可以适用于数组，对象和整数

# 循环数组
<li v-for="site in sites">值：{{ site }}</li>
<li v-for="(site, index) in sites">索引：{{index}} - 值：{{ site }}</li>

# 循环对象：注意，参数分配有（值，键名，索引）
<li v-for="site in sites">值：{{ site }}</li>
<li v-for="(site, key) in sites">值：{{ site }} - 键名:{{key}}</li>
<li v-for="(site, key, index) in sites">值：{{ site }} - 键名:{{key}} - 索引值：{{index}}</li>

# 循环整数：注意，起始值为1
<li v-for="site in 10">值：{{ site }}</li>

v-on事件监听指令

在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等，这就需要用到v-on指令，它也可以缩写为@，v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

常用事件：click，change，focus，blur，keyup，keydown等等

事件修饰符：

• stop修饰符，可以阻止事件向上级标签的冒泡行为
• self修饰符，表示被该修饰符修饰的父元素不接收子元素的事件冒泡行为
• prevent修饰符，可以阻止一些html标签的默认行为，比如a标签
• enter修饰符（按键监听修饰符的一种），可以监听回车按键的操作
• once修饰符，表示事件只可以被触发监听一次，以后再操作则无效
• capture修饰符，表示开启事件传播的捕获模式，事件由父元素向子元素传播，较少用到

v-model双向绑定

v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定

v-model 在内部为不同的输入元素type使用不同的 property 并抛出不同的事件：

• text，password和 textarea 元素使用 value property 和 input 事件
• checkbox 和 radio 使用 checked property 和 change 事件
• select 字段将 value 作为 prop 并将 change 作为事件

# 单行文本
<input v-model="message" placeholder="edit me">

# 多行文本
<textarea v-model="message" placeholder="add multiple lines"></textarea>

# 单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">

# 复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
data: {
    checkedNames: []
}

# 下拉框
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
 </select>
data: {
    selected: ""
}

3.vue的组件

1.组件创建方式分为全局组件与局部组件：

   全局组件：可以被多个APP进行调用,在APP实例外创建;定义一个名为 button-counter 的新组件:组件名称若使用驼峰原则，引用组件时需要全部小写，并且两个单词之间用“-”连接;若不使用驼峰原则时，直接使用原组件名

全局组件创建方式一：

Vue.component('buttonCounter', {
    data: function () {  // 1.组件可以有自己的data数据，组件中的data必须是一个方法，且这个方法内部必须返回一个对象才行，而实例中的data可以为一个对象
        return {
        count: 0,
        info: 'hello world'
        } 
    },
      template: '<button v-on:click="count++">{{message}} clicked me {{ count }} times.</button>'
      // 2. 全局组件有template属性 
})

全局组件创建方式二：调用公共模板对象

<script>
    let project={
        template:'',
        data:function(){  // 组件中的data必须是一个方法
            return {
            info:'hello world',
            message:'badwoman'      
        },
        methods:{}
        }
    Vue.component('组件名',project);     
    }
</script>

全局组件创建方式三：调用公共模板对象–其实这也是全局组件的一种创建方式，将template绑定到自身data函数中，此刻的data不同于实例中的data，此刻为一个函数

<template id="tmpl">  
   <div>
     <h3>{{count}}</h3>
   </div>
 </template>
 
 <script>
   var dataObj = { count: 0 };
   // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
   Vue.component('counter', {
     data: function () {
       // return dataObj
       return { count: 0 }
     },
     template: '#tmpl',
     methods: {}
   });
   // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
     el: '#app',
     data: {},
     methods: {}
   })
 </script>

参考文章

• Vue标准写法以及关于computed、methods、watch，mounted的区别
• v-on事件监听指令的基本用法