Vue 学习笔记

发布时间：2020-12-16 23:22:18 所属栏目：百科来源：网络整理

导读：一、安装 1、基于nodeJs环境安装node设置node权限 2、基于node，利用淘宝npm镜像安装相关依赖在终端里直接输入： (1)、(2)、vue ，回车，若出现vue信息表示成功 ? 3、安装全局vue-cli 脚手架，用于帮助搭建所需模版框架 npm install -g vue-cli ，回车等

一、安装

1、基于nodeJs环境

　　安装node设置node权限

2、基于node，利用淘宝npm镜像安装相关依赖

　　在终端里直接输入：

　　(1)、(2)、vue ，回车，若出现vue信息表示成功

3、安装全局vue-cli 脚手架，用于帮助搭建所需模版框架

　　npm install -g vue-cli ，回车等待安装....

4、创建项目

　　vue init webpack 项目名，回车

5、安装依赖

　　cd 项目名，回车进入到文件夹

　　cnpm install ，回车等待

　　项目结构里多了一个 node_modules 文件夹(改文件里的内容就是之前安装的依赖)

6、测试环境是否搭建成功

　　方法1: cnpm run dev (-port 新端口号／在config文件下的index文件下的prot字段修改为新端口号)

　　方法2:在浏览器输入localhost:8080 (默认端口号8080)

二、Vue.js 起步

1、语法格式如下：

　　　　var vm=new Vue({

　　　　　　//选项

　　　　})

site:{{site}}；{{url}}

 vm='#app''百度''www.baidu.com' .site+"查询"

site:{{site}}；url:{{url}}

 data={site:"百度"url:"www.baidu.com" vm='#app'===data) 
　　　document.write("
"===document.getElementById('app'))

三、Vue.js 模版语法?

数据绑定最常见形式就是使用{{...}} (双大括号)的文本插值：

1、v-html 指令

　　v-html指令用于输出html代码：　　　

new Vue({
　　el:'#app',　　data:{
　　　　message:"Hello Vue!"
　　}
})

2、v-bind 指令

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

　　.class1{color:red;background:#444;}

="r1"> 　　　　

new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　class1:false
　　　　}
　　});

3、表达式

5+5 }}
? 'YES' : 'NO' }}
'').reverse().join('') }} 　　　　

new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　ok:true,　　　　　　message:'ABC',　　　　　　id:1
　　　　}
　　})

4、指令

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

　　指令用于在表达式的值改变时，将某些行为应用到DOM上。

="seen">现在你看到我了

new Vue({
　　el:'#app',　　data:{
　　　　seen:true
　　}
})

　　这里的v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素。

其他v-指令：

　　 v-on指令，用于监听DOM事件。

5、双向数据绑定

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

new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　message:'ABC!'
　　　　}
　　})

6、过滤器

　　Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符”指示? ｜?

7、缩写

　　v-bind 缩写:

　　　　v-bind:href="url" //完整写法

　　　　:href="url" //缩写

　　v-on 缩写 :

　　　　v-on:click="doSomething" //完整写法

　　　　@click="doSomething" //缩写

四、条件语句和循环语句

1、v-if / v-else / v-else-if /v-show 条件语句

="type==='A'">A

-="type==='B'">B

-="type===C">C

>Not A/B/C

new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　type:'C'
　　　　}
　　})

2、v-for 循环语句

="site in sites"> 　　　　　　

new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　sites:[
　　　　　　　　{name:'Ling'},　　　　　　　　{name:'Hone'},　　　　　　　　{name:'Fei'}
　　　　　　]
　　　　}
　　})

　　结果：

　　　　1.Ling

　　　　2.Hong

　　　　3.Fei

?三个参数索引。

="(value,key,index) in object">

new Vue({
　　　　　el:'#app',　　　　　data:{
　　　　　　object:{
　　　　　　　　"name":"百度"，
　　　　　　　　"url":"www.baidu.com"
　　　　　　}
　　　　　}
　　})

　　结果：

　　　　1.name:百度

　　　　2.url:

五、Vue.js 计算属性

1、计算属性关键词：computed。

原始字符串：{{message}}

计算后反转字符串：{{reversedMessage}}

var vm=new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　message:'ABC!'
　　　　},　　　　computed:{
　　　　　　reversedMessage:function(){
　　　　　　　　return this.message.split('').reverse().join('')
　　　　　　}
　　　　}
　　})

　　原始字符串：ABC!

　　计算后反转字符串：!CBA

　　我们可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。

　　可以说computed性能会更好，但是如果你不希望缓存，可以使用methods属性。

2、computed setter

　　computed属性默认只有getter，不过在需要时你也可以提供一个setter：

var vm Vue({
　　　　el:'#app',　　　　data:{
　　　　　　name:'Google',　　　　　　url:'www.google.com'
　　　　},　　　　computed:{
　　　　　　site:{
　　　　　　　　get:function(){
　　　　　　　　　　return this.name+' : '+this.url
　　　　　　　　},　　　　　　　　set:function(newValue){
　　　　　　　　　　var names=newValue.split(' ')
　　　　　　　　　　this.name=names[0]
　　　　　　　　　　this.url=names[names.length-1]
　　　　　　　　}
　　　　　　}
　　　　}
　　})
　　vm.site='百度 www.baidu.com';
　　document.wirte("name:"+vm.name);
　　document.write("<br");
　　document.write("url:"+vm.url);

结果：

　　　　百度：

　　　　name:百度

　　　　url:www.baidu.com

?六、监听属性

我们可以通过 watch 来响应数据变化：　　

?七、样式绑定

我们可以用v-bind 来设置样式属性。

　　v-bind:class设置一个对象，从而动态的切换class：

1、

2、

3、

　　

　　new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　objectClass:{
　　　　　　　　active:true,　　　　　　　　item:true
　　　　　　}
　　　　}
　　})

4、数组语法

5、还可以用三元表达式切换class

?

?

?八、事件处理

1、v-on

　　　　
这个按钮被点击了{{counter}}次

　　new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　counter:0
　　　　}
　　})

九、表单

1、input和textarea元素中使用v-model实现双向数据绑定：

　　
input 元素：
　　　　消息是：{{message}}

　　　　
textarea 元素：

　　　　<textarea v-model="message2" placeholder="编辑我.....">
　　　　{{message2}}

　　

　　new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　message:'Googel',　　　　　　message:'谷歌 rn http://www.google.com'
　　　　}
　　})

2、复选框

　　
　　
单个复选框
　　　　="checkbox">{{checked}}
　　　　
多个复选框

　　　　<input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
　　　　<label for="baidu">百度
　　　　<input type="checkbox" id="google" value="Google" v-model="checkedNames">
　　　　<label for="google">谷歌
　　　　<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
　　　　<label for="google">淘宝
　　　　

　　　　{{checkedNames}}
　　

　　new Vue({
　　　　el:'#app',　　　　data:{
　　　　　　checked:false,　　　　　　checkedNames:[]
　　　　}
　　})

?

十、组件

组件(Component)是Vue.js最强大的功能之一。

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

?

注册一个全局组件语法格式如下：

trgName 为组件名，options为配置选项。注册后，我们可以使用以下方式来调用组件：

?

1、全局组件

　　注册一个简单的,并使用它：

　　　　
　　　　Veu.component('aaa',{
　　　　　　template:'
自定义组件！
'
　　　　})
　　　　new Vue({el:'#app'})

2、局部组件

　　 Child='
自定义组件！
''#app''aaa':Child

3、动态Prop

　　
　　　　　　
'child'"message"'{{message}}''#app''父组件内容！'

4、自定义事件

　　父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，9??需要使用自定义事件！

　　我们可以使用v-on绑定自定义事件，每个Vue实例都实现了事件接口(Events interface),即：

　　使用：$on(eventName)监听事件

　　　　$emit(eventName)触发事件

{{total}}
　　　　　　　　　　
'counter''

如果你想在某个组件的根元素上监听一个原生事件。可以使用.native 修饰 v-on .

?

?

十一、自定义指令

1、页面载入时，input元素自动获取焦点

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

?

2、指令参数

　　
（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!