VUE入门基础

vue入门基础

一、两种开发模式:

01

1、CLI# 全局安装 vue-cli npm install --global vue-cli# 创建一个基于 webpack 模板的新项目 vue init webpack my-project# 安装依赖,走你 cd my-project npm install

02

2、引入js文件

直接下载,引入js文件即可

二、Vue知识点 1、Vue所支持的指令 选择: v-if v-else v-else-if 循环: v-for 显示: v-show 绑定属性: v-bind 在vue中 绑定html属性,必须使用v-bind 缩写的形式: v-bind:src --> :src 双向数据绑定: v-model 修饰符:.lazy .number .trim <input type='number' v-model.number='num1'/> 绑定事件: v-on:click="handleClick" 缩写形式: @click=""

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<!-- 判断相关的指令-->

<button v-if="hasMore">加载更多</button>

<p v-else="!hasMore">没有更多数据可以加载了</p>

<span v-if="score > 80">优秀</span>

<span v-else-if="score > 60">及格</span>

<span v-else>不及格</span>

<h1 v-show="score > 60"> it is a test </h1>

<!-- 循环 -->

<!--

ng-repeat="item in list"

ng-repeat="(value,key) in list"

-->

<ul>

<li v-for="item in list">

{{item}}

</li>

</ul>

<ul>

<li v-for="(value,key) in car">

<p>{{"属性为"+key+" 值为 "+value}}</p>

</li>

</ul>

<!-- ng-src="img/{{url}}" -->

<!-- 在vue中绑定html属性,必须使用v-bind-->

<!--<img v-bind:src="'img/'+imgName" alt=""/>-->

<!-- v-bind有一种缩写形式-->

<!--<img :src="'img/'+imgName" alt=""/>-->

<a v-bind:href="linkUrl">Tarena</a>

<a :href="linkUrl">Tarena</a>

<hr/>

<input type="text" v-model="kw"/>

<p>{{kw}}</p>

<input type="number" v-model.number="num1"/>

<input type="number" v-model.number="num2"/>

<p>{{num1+num2}}</p>

<button v-on:click="handleClick">clickMe</button>

<button @click="handleClick">clickMe</button>

</div>

<script>

new Vue({

el:'#example',

data:{

msg:'Hello Directive',

hasMore:true,

score:70,

list:[100,200,300],

car:{

name:'WEY',

price:20

},

imgName:'1.jpg',

linkUrl:'http://www.tedu.cn',

kw:'zhangsan',

num1:10,

num2:20

},

methods:{

handleClick:function(){

console.log('btn is clicked');

}

}

})

</script>

</body>

</html>

2、自定义指令

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<!-- <select v-on:change="funcSelect">-->

<select @change="funcSelect">

<option value="r">Red</option>

<option value="g">Green</option>

<option value="b">Blue</option>

</select>

<!--提交事件触发时的修饰符:.prevent-->

<form @submit.prevent="funcSubmit">

是否同意<input type="checkbox"/>

<button>提交</button>

</form>

</div>

<script>

new Vue({

el: '#example',

data: {

msg: 'Hello Directive'

},

methods:{

funcSelect:function(event){

console.log(event.target.value);

},

funcSubmit: function () {

console.log('submit event is triggered');

}

}

})

</script>

</body>

</html>

3个钩子函数: bind:绑定 update:更新 unbind:解绑

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<ul v-change="count">

<li>test01</li>

<li>test02</li>

<li>test03</li>

</ul>

</div>

<script>

new Vue({

el: '#example',

data: {

msg: 'Hello Directive',

count:10

},

directives:{

change:{

bind: function (el) {

console.log(arguments);

el.style.backgroundColor = '#eeeeee';

console.log('bind func is called');

},

update: function () {

console.log('update func is called');

},

unbind: function () {

console.log('unbind func is called');

}

}

}

})

</script>

</body>

</html>

4、计算属性 计算属性其实是一个方法,定义在computed属性中的方法。 计算属性的优势: ①计算属性的方法和methods中的方法实现的功能是一样的,但是由于计算属性是有计算缓存的,可以让更新更高效 ②让代码更方便进行维护 什么时候需要使用计算属性? 方法所依赖的数据,性能开销比较大,适合用计算属性,正常情况,在methods定义方法也是可以的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<!--<p>{{步骤1,步骤2,步骤3.。。步骤5}}</p>-->

<p>{{operateMsg}}</p>

</div>

<script>

new Vue({

el: '#example',

data: {

msg: 'Hello Directive'

},

computed:{

operateMsg: function () {

//实现比较复杂的业务逻辑

//步骤1

//步骤2

//步骤3

//步骤4

//步骤5

return 123

}

}

})

</script>

</body>

</html>

5、监听属性 watch:{ kw:function(newValue,oldValue){} kw2:function(newValue,oldValue){} }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<input type="text" v-model="kw"/>

</div>

<script>

new Vue({

el: '#example',

data: {

msg: 'Hello Directive',

kw:''

},

watch:{

kw:function(newValue,oldValue){

console.log("当前的数据为"+newValue);

console.log("上一次的数据为"+oldValue);

}

}

})

</script>

</body>

</html>

6、vue中生命周期 create、mount、update、destroy 每个阶段都对应着有处理函数: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<button @click="handleClick">clickMe</button>

<p>{{count}}</p>

</div>

<script>

var app = new Vue({

el: '#example',

data: {

msg: 'Hello Directive',

count:0

},

methods:{

handleClick: function () {

console.log(app);

this.count++;

if(this.count > 5)

{

app.$destroy();

}

}

},

beforeCreate: function () {

console.log('in beforeCreate');

},

created: function () {

console.log('in created');

},

beforeMount: function () {

console.log('in beforeMount');

},

mounted: function () {

console.log('in mounted');

},

beforeUpdate: function () {

console.log('in beforeUpdate');

},

updated: function () {

console.log('in updated');

},

beforeDestroy: function () {

console.log('in beforeDestroy');

},

destroyed: function () {

console.log('in destroyed');

}

})

</script>

</body>

</html>

7 Vue.component('my-component',{ template: }) data:... <my-component></my-component> 组件命名:建议通过烤串式的命名方式(中间有-连接起来)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<my-component></my-component>

</div>

<script>

//局部组件的创建和使用

var child = {

template:'<span> Hello Child </span>'

}

new Vue({

el: '#example',

data: {

msg: 'Hello Directive'

},

components:{

'my-component':child

}

})

</script>

</body>

</html>

8、复合组件 全局组件可以在父模板中的任何一个元素(组件)去使用, 局部组件只能够用在父模板中。 比如:局部组件 item,全局组件 my-list,my-item 可以在my-list中调用my-item,但是不可以调用item(局部组件) 当将局部组件或者全局组件放在一起构成的组件称之为复合组件。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="js/vue.js"></script>

</head>

<body>

<div id="example">

{{msg}}

<my-list></my-list>

<item></item>

<my-item></my-item>

</div>

<script>

//创建全局组件

Vue.component('my-list',{

template:' <div><h1> it is a list</h1> ' +

' <my-item></my-item> </div>'

});

Vue.component('my-item',{

template:'<p> it is my item </p>'

})

new Vue({

el: '#example',

data: {

msg: 'Hello Directive'

},

components:{

//局部组件只能够用在当前的父模板

'item':{

template:'<span> it is a list item</span>'

}

}

})

</script>

</body>

</html>

sdzfgdhg

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:javascript艺术

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE 入门基础(9)

    十一,深入响应式原理    声明响应式属性     由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值。 ...

    用户1197315
  • VUE 入门基础(8)

    十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

    用户1197315
  • VUE 入门基础(7)

    八,事件处理器 监听事件   可以用v-on 指令监听DOM 事件来触发一些javaScript     <div id="example-1">   ...

    用户1197315
  • VUE 入门基础(6)

    六,条件渲染   v-if 添加一个条件块     <h1 v-if=“ok”>Yes</h1>   也可以用v-else 添加else 块   <templa...

    用户1197315
  • VUE 入门基础(5)

    五,Class 与 Style 绑定 绑定HTML class   对象语法     我们可以传给v-bind:class 一个对象,以动态的切换class  ...

    用户1197315
  • VUE 入门基础(4)

    四,计算属性   基础例子     <div id=‘example’>       <p>0riginal message: “{{message}}”</p...

    用户1197315
  • VUE 入门基础(3)

    三,模板语法   Vue将模板编译成虚拟DOM渲染函数,结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。   插值,...

    用户1197315
  • VUE 入门基础(2)

    二,起步 引用方式可以使用  vue-cli     <script src="https://unpkg.com/vue/dist/vue.js"></scr...

    用户1197315
  • VUE 入门基础(1)

    一,安装 Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼...

    用户1197315
  • vue入门基础详解之父子通讯

    子组件需要监控一个事件,然后在实例中执行这个方法就行,函数参数可以传递data,然后在实例中执行改方法!

    十月梦想
  • Vue入门基础之组件插槽(slot)使用

    组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,slot就提供了极大的便利!下面看一下slot用法!

    十月梦想
  • Vue 3 入门基础知识

    本章节实验主要讲解 vue 的最基本的知识点,在讲解知识点之前,我们需要介绍一下 vue.js:

    公众号---人生代码
  • vue入门基础详解之组件元素不对应以及ref用法

    在我们使用table时候,table的结构是table>tbody>tr>td,但是我们之间在table下面定义一个包含详情的组件,在table下使用多个会出现...

    十月梦想
  • Vue 基础入门

    Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常...

    Demo_Null
  • 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    如果想注册局部指令,组件中接受一个directives的选项,位于vue实例参数里面,局部指令只能在本组件使用

    常见_youmen
  • 后端小白的 Vue 入门笔记 —— 基础篇

    出处:https://www.cnblogs.com/ZhuChangwu/p/11303521.html

    IT技术小咖
  • Vue教程01(基础入门)

      因为最近需要使用到Vue,所以打算将Vue的学习资料详细整理一份,感兴趣的小伙伴可以一起来哦。

    用户4919348
  • 「vue基础」新手入门篇(一)

    自从Facebook2013年推出React框架以来,基于UI组件的前端框架越来越流行,主要得益于组件的重用性,数据状态的管理等特性。

    前端达人
  • Vue教程(动画-基础入门)

      在我们显示的页面中动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基...

    用户4919348

扫码关注云+社区

领取腾讯云代金券