vue基础学习

vue.js基础知识学习

vue.js起步

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

语法格式如下：

var vm = new Vue({

 data:{},

 methods:{}

})

data 用于定义属性

methods 用于定义的函数

{{}}用于输出对象属性的函数返回值,及数据绑定

指令是带有v-前缀的特殊属性。

例如：v-if v-bind v-on

参数在指令后以冒号指明

例如：<a v-bind:href="url"></a>

           <a v-on:click="dosomething"></a>

HTML属性中值应使用v-bind指令。

例如：以下实例判断use的值，如果为true使用class1类的养生，否则不使用该类

<div v-bind:class="{'class1':use}">

//v-bind:class指令

</div>

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

用户输入

在input输入框中我们可以使用v-model指令来实现双向数据绑定

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

修饰符

.lazy  v-model在input事件中同步输入框的值与数据，加修饰符lazy，从而转变为change事件中同步

例如：<input v-model.lazy="msg">

.number 如果想自动将用户输入值转变为number类型，可以添加修饰符number

例如：<input v-model.number="age" type="number">

.trim 如果要自动过滤用户输入的首尾空格，可以使用修饰符trim

例如：<input v-mode.trim="msg">

缩写 v-bind，v-on 

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

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

条件语句 v-if v-else v-else-if 等

v-show也可以根据条件展示元素。

v-for 循环语句

v-for指令需要以site in sites形式的特殊语法

例如：<li v-for="site in sites"> {{ site.name }} </li>

vue.js计算属性 关键字 computed

vue.js监听属性 watch

vue.js样式绑定 class <div v-bind:class="{ activeColor, fontSize}"></div>

Vue.js style(内联样式) <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

vue.js事情处理器 v-on指令 <button v-on:click="counter += 1">增加 1</button>

vue.js组件

组件（component）是vue.js最强大的功能之一

组件可以扩展HTML元素，封装可重用的代码

®️一个全局组件语法格式如下：

Vue.component(taName,options)   taName为组件名称，options为配置选项

注册后可以 <taName></taName> 形式调用

全局组件

例如：

<div id="app">

      <test></test>

</div>

<script>

// 注册

Vue.component('test', { template: '<h1>自定义组件!</h1>' })

// 创建根实例

new Vue({ el: '#app' })

</script>

局部组件

例如：

<div>

<test></test>

</div>

<script>

var child = {

  template:'<h1>这是局部组件</h1>'

}

//创建根实例

new Vue({

  el:'#app',

  components:{

   //<test>将只能在父模板可用

  'test':Child

}

})

</script>

Prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件，子组件需要显式的用props选项声明“prop”

例如：

<div id="app">

<child message="hello!"></child>

</div>

<script>

// 注册

Vue.component('child', { // 声明 props props: ['message'],

// 同样也可以在 vm 实例中像 "this.message" 这样使用

template: '<span>{{ message }}</span>' })

// 创建根实例

new Vue({ el: '#app' })

</script>

vue.js组件-自定义事件

使用$on(eventname)监听事件

使用$emit(eventname)触发事件