Vue 学习笔记之一起步-工具盒子

1.起步 {#1起步}

创建一个html，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.1HelloWorld： {#11helloworld}

<div id="app">
	<p>{{ msg }}</p><!-- {{}}插值表达式-->
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg:'Hello Vue!'
		}
	})
</script>

以上就成功创建了第一个Vue应用！Vue将数据和DOM之间建立了关联，所有东西都是响应式的。打开控制台修改msg的值，你将看到上例相应地更新。

除了文本插值，我们还可以像这样来绑定元素特性：

<div id="app-2">
	<span v-bind:title="message">
		鼠标悬停几秒钟查看此处动态绑定的提示信息！
	</span>
</div>
<script type="text/javascript">
	var app2 = new Vue({
		el: '#app-2',
		data: {
			message: '页面加载于 ' + new Date().toLocaleString()
		}
	})
</script>

v-bind特性被称为指令。指令带有前缀 v-以表示它们是 Vue 提供的特殊特性。该指令的意思是："将这个元素节点的 title 特性和 Vue 实例的 message属性保持一致"。

v-text与v-cloak:

<style>
    [v-cloak]{
        display: none;
    }
</style>

<div id="app">
    <p v-cloak>{{ msg }}</p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        msg:'Hello World'
    }
})

使用v-cloak时当网速较慢时不会将插值表达式{{ msg }}显示出来,只有当加载完毕时才会渲染到页面上，且使用v-cloak时可以在插值表达式两侧写其他内容并且会显示到页面上

<div id="app">
    <p v-cloak></p>
</div>

结果为：

左边-------- Hello World 右边+++++++++++

但是如果使用v-text则不需要写样式，直接绑定即可解决问题，但是标签中不能写任何内容，否则会被覆盖

<div id="app">
    <p v-text="msg"></p>
    <p v-text="msg">Hello World</p>
</div>

如上其中第一个p标签和第二个p标签显示的内容是一样的Hello World并不会被显示出来

v-text和插值表达式共同点是：

其内容都会被当做文本来解析，即使内容是html格式

如果想把内容当作html来解析则使用v-html,同样v-html标签体中的内容也不会显示

<div id="app">
	<div v-html="msg">哈哈哈哈哈哈</div>
</div>

var vm = new Vue({
        el:'#app',
        data:{
        msg:'<h1>这是一个大大的H1</h1>'
    }
})

1.2条件循环v-if与v-for： {#12条件循环v-if与v-for}

条件： {#条件}

控制元素是否显示：

<div id="app-3">
	<p v-if="seen">现在你看到我了</p>
</div>
&lt;script type="text/javascript"&gt;
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
&lt;/script&gt;

当seen为true时会将p标签显示出来，为false时之前显示的消息消失了。

v-show 与v-if功能一样可以控制隐藏与显示，但是不同点是v-if每次都会重新删除或者创建元素，而v-show则不会每次都进行DOM的删除和创建操作只是添加了display:none样式

v-if有较高的切换性能消耗
v-show有较高的初始化渲染消耗

如果元素涉及到频繁的切换，最好不要使用v-if,如果元素可能永远也不会被显示出来被用户看到则推荐使用v-if

循环： {#循环}

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
      <!-- 也可以获得序号-->
       <li v-for="(todo,i) in todos">
      	索引值：{{i}}--->元素：{{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

可以看到：

1. 学习 JavaScript
2. 学习 Vue
3. 整个牛项目

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

v-for遍历对象

<div id="app-4">
    <p v-for="(value,key) in user">
        {{key}}:{{value}}
    </p>
</div>
<script type="text/javascript">
    var app4 = new Vue({
        el: '#app-4',
        data: {
            user:{
                id:'1',
                name:'zhangsan',
                sex:'男',
                age:'18'
            }
        }
    })
</script>

运行结果：

id:1 name:zhangsan sex:男

age:18

在遍历对象的键值对时除了 value ,key在第三个位置还有一个索引

v-for="(value,key,index) in user"

v-for迭代数字

<div id="app-4">
    <p v-for="count in 10">
        这是第 {{count}} 次循环
    </p>
</div>

count迭代从1开始

v-for中key的使用

使用key来强制数据关联

<div id="app-4">
    <label>id:<input type="text" v-model="id"/></label>
    <label>name:<input type="text"v-model="name"/></label>
    <button type="button" @click="add">添加</button>
&amp;lt;!-- 注意：v-for循环的时候，key属性只能使用number获取string--&amp;gt;
&amp;lt;!-- 注意：key在使用的时候，必须使用v-bind属性绑定的形式指定key的值 --&amp;gt;
&amp;lt;p v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&amp;gt;
    &amp;lt;input type=&quot;checkbox&quot;/&amp;gt;{{item.id}}-{{item.name}}
&amp;lt;/p&amp;gt;

&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var app4 = new Vue({
el: '#app-4',
data: {
list:[
{id:1, name:'赵高'},
{id:2, name:'嬴政'},
{id:3, name:'李斯'},
{id:4, name:'荀子'}
]
},
methods:{
        add: function(){//添加方法
            this.list.push({id:this.id, name: this.name});
        }
    }
})

&lt;/script&gt;

1.3数据绑定v-bind {#13数据绑定v-bind}

<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

var app2 = new Vue({
	el: '#app-2',
    data: {
		message: '页面加载于 ' + new Date().toLocaleString()
	}
})

v-bind是vue中提供的用于绑定属性的指令，v-bind可以简写为:要绑定的属性，v-bind中还可以写合法js表达式如：

<div id="app-2">
    <span v-bind:title="message + 'hellod world'">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

1.4事件绑定v-on {#14事件绑定v-on}

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

注意reverseMessage方法中，我们不用直接操作DOM即可更新状态

除了v-on:click,v-on事件可以绑定：

mouseenter

mouseleave

等事件

v-on事件缩写：@事件名

事件修饰符：

.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器使用事件捕获模式
.self只当事件在该事件本身（比如不是子元素）触发时触发回调
.once事件只触发一次

1.5事件修饰符案例： {#15事件修饰符案例}

<div id="app">
    <div class="innder" @click="divhandler">
        <button type="button" @click="btnhandler">戳他</button>
    </div>
</div>

//创建vue实例得到ViewModel
var vm = new Vue({
    el:'#app',
    data:{
},
methods:{
    divhandler:function(){
        console.log('这是触发了inner div的点击事件')
	 },
    btnhandler:function(){
        console.log('这是触发了 btn 按钮的点击事件')
    }
}

})

运行结果：(冒泡机制限制性当前的事件再往外冒)

这是触发了 btn 按钮的点击事件
事件修饰符.html:29 这是触发了inner div的点击事件

如果想要阻止冒泡则在@click上加.stop：

<div id="app">
    <div class="innder" @click="divhandler">
        <button type="button" @click.stop="btnhandler">戳他</button>
    </div>
</div>

执行结果(阻止了事件向外冒泡)：

这是触发了 btn 按钮的点击事件

阻止默认行为.prevent {#阻止默认行为prevent}

<div id="app-2">
	<a href="www.baidu.com" @click="linkClick">点我到百度</a>
</div>

如上点击会跳转到百度，如果想阻止a标签的默认跳转事件则：
点我到百度

//创建vue实例得到ViewModel
var vm = new Vue({
	el:'#app-2',
	data:{
},
methods:{
	linkClick:function(){
		alert(&quot;弹出&quot;);
	}
}

})

capture {#capture}

.capture机制即捕获机制，与冒泡机制相反，事件从往里执行

self {#self}

.self机制只触发本身的事件，既不事件冒泡也不捕获，只会阻止自己身上冒泡行为的触发而不会影响其他元素的事件

once {#once}

使用.once，事件只触发一次

1.6简单案例：跑马灯效果 {#16简单案例跑马灯效果}

<div id="app">
	<input type="button" value="浪起来" @click="lang"/>
	<input type="button" value="低调"@click="stop"/>
&amp;lt;h4&amp;gt;{{ message }}&amp;lt;/h4&amp;gt;

&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var vm = new Vue({
el:'#app',
data:{
message:'猥琐发育，别浪！',
intervalId:null//在data上定义定时器id
},
methods:{
lang: function() {
//注意在vm实例中想要获取data上的数据,或者想要调用methods中的方法
//必须要使用this来进行访问
var that = this;//解决内部访问问题
			//在开启之前先将之前开启的定时器关闭,避免重复开启
			clearInterval(this.intervalId)
			that.intervalId = setInterval(function(){
				//截取第一个字符串
				var start = that.message.substring(0,1);
				//截取剩下的字符串
				var end = that.message.substring(1);
				//拼接剩下的字符串
				that.message = end + start;
			},400)
			//vue会监听自己身上data中所有数据的改变,只要数据发生变化,就会自动更新DOM
		},
		stop:function() {
			clearInterval(this.intervalId)
		}
	}
})
/*
	分析:
	1.给【浪起来按钮】绑定一个点击事件：v-on
	2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到message字符，然后
	调用字符串的substring来进行字符串截取操作，把第一个字符截取出来，放到最后
	一个位置即可
	3.为了实现点击一下按钮自动截取的功能需要2步骤中的代码，放到一个定时器中
*/

&lt;/script&gt;

1.7v-model指令： {#17v-model指令}

v-bind只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定

v-model它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

注意v-model只能运用在表单元素中

input(radio,text,address,email...)

select

checkbox

textarea

1.8v-model简易计算器 {#18v-model简易计算器}

<div id="app">
    <input type="text" v-model="n1" />
&amp;lt;select v-model=&quot;opration&quot;&amp;gt;
    &amp;lt;option value =&quot;+&quot;&amp;gt;+&amp;lt;/option&amp;gt;
    &amp;lt;option value =&quot;-&quot;&amp;gt;-&amp;lt;/option&amp;gt;
    &amp;lt;option value =&quot;*&quot;&amp;gt;*&amp;lt;/option&amp;gt;
    &amp;lt;option value =&quot;/&quot;&amp;gt;/&amp;lt;/option&amp;gt;
&amp;lt;/select&amp;gt;

&amp;lt;input type=&quot;text&quot; v-model=&quot;n2&quot; /&amp;gt;

&amp;lt;input type=&quot;button&quot; value=&quot;=&quot; @click=&quot;sulotion&quot;/&amp;gt;

&amp;lt;input type=&quot;text&quot; v-model=&quot;result&quot; /&amp;gt;

&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opration:'+'
},
methods:{
sulotion:function(){//计算器计算方法
//逻辑
sulotion:function(){//计算器计算方法
var codeStr = 'parseInt(this.n1)'+ this.opration +'parseInt(this.n2)'
this.result = eval(codeStr);
}
}
}
})
&lt;/script&gt;

1.9在Vue中使用样式 {#19在vue中使用样式}

1.数组方式 :class="['thin','red','i']"

<style type="text/css">
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    .i{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }
</style>
&lt;div id="app"&gt;
&lt;h1 :class="['thin','red','i']"&gt;这是一个h1，测试vue中使用样式&lt;/h1&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var vm = new Vue({
el:'#app',
data:{
	},
	method:{

	}
})

&lt;/script&gt;

2.在数组中使用三元表达式 ：:class="['thin','red',flag?'active':'']"

<div id="app">
	<h1 :class="['thin','red',flag?'active':'']">这是一个h1，测试vue中使用样式</h1>
</div>

其中flag是data中定义的变量

3.在数组中使用对象代替三元表达式提高可读性 {'active':flag}

<h1 :class="['thin','red',{'active':flag}]">这是一个h1，测试vue中使用样式</h1>

4.直接使用对象：

:class="{'thin':true,'red':true,'active':true}"

<h1 :class="{'thin':true,'red':true,'active':true}">这是一个h1，测试vue中使用样式</h1>

5.间接绑定：

<div id="app">
	<h1 :class="classObj">这是一个h1，测试vue中使用样式</h1></div>

var vm = new Vue({
    el:'#app',
    data:{
        classObj:{'thin':true,'red':true,'active':true}
    }
})

6.使用style

也可以间接绑定

<div id="app">
	<h1 :style="{color:'red', font-weight:'200' }">这是一个h1，测试vue中使用样式</h1></div>

51工具盒子

Vue 学习笔记之一起步