标签：完整 参数 -o sage 自动 直接 charset 电影 user
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。
Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。
Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。
Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。
Vue.js使用文档及下载Vue.js
Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html
和js一样，vue也是需要引包来进行使用
<script src="./js/vue.js"></script>
引入包之后，也是在<script></script>中进行使用，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
在使用之前要知道作用域的概念，通常我们把需要改变的地方，都放到一个盒子里，这个盒子通常是用div标签包裹的，我们也需要给这个盒子取一个名字，类名还是id名都可以，这是为了以后更方便的找到它。
vue和js不同，它是需要改变标签的
首先，用一个盒子来包裹需要改变的内容（当然，也可以不包裹，直接用选择器选到，这个盒子只是为了减少后续的操作）然后给这个盒子取一个名字，这里我给它取了一个类名为div1，
<div class="div1">
</div>
然后往里面添加一个需要改变内容的标签
<div class="div1">
<div class="div2">{{content}}</div>
</div>
然后在<script>标签中新建一个vue对象
<script>
var vm = new Vue({ // 创建vue对象
el:‘.div1‘, // 绑定操作的作用域
data:{ //写入数据
content:"vue的基本使用"
}
})
</script>
运行之后就完成了一个简单vue操作。
操作数据：标签体中加入"{{变量名}}"用来接受数据，然后在<script>标签中创建对象并在data中设置相应的值
修改属性：v-bind:（可以简写为":"），使用方法是在需要改变的属性前加入"v-bind:"或者":"，然后将属性值换成变量名，然后在vue对象的data中加入对应内容即可。
调用方法：v-on:（可以简写为"@"），使用方法是在需要改变的的事件前面加上"v-on:"或者"@"，然后将函数换成函数名，然后在vue对象的methods中加入相关的函数即可。
三个的综合例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-vue的基本语法</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
// 创建vue对象
var vm = new Vue({
el:‘.box‘,
data:{
content:"操作数据",
linkData:"淘宝链接",
url:‘http://www.taobao.com‘,
counter:0
},
methods:{
fnAddClick:function(){
// this --vue对象
this.counter += 1;
}
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- // 3.调用方法 指令 v-on: -->
<button v-on:click="fnAddClick">计数器: {{counter}}</button>
<!-- // 2.修改属性 指令 v-bind: -->
<a v-bind:href="url" target=‘_blank‘>{{linkData}}</a>
<!-- // 1.操作数据 -->
<p>{{content}}</p>
</div>
</body>
</html>
其他语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-vue的基本语法</title>
<style>
.red{
color: red;
}
.font{
font-size:50px;
}
</style>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
// 三元运算符
// (条件)?"值1":"值2" 条件为真则为值1，否则为值2
// 创建vue对象
var vm = new Vue({
el:‘.box‘,
data:{
counter:0,
contentPragraph:‘三目运算 三元运算‘,
isRed:false,
sStr:‘12345678‘
},
})
}
</script>
</head>
<body>
<div class="box">
<!-- 下面用的都是简写形式 -->
<!-- 3.js 链式 字符串反转-->
<p>{{sStr.split(‘‘).reverse().join(‘‘)}}</p>
<!-- 2.三目运算 三元运算 -->
<p :class="isRed?‘red‘:‘font‘">{{contentPragraph}}</p>
<!-- 1.累加的表达式 -->
<button @click="counter += 1">新的计数器:{{counter}}</button>
</div>
</body>
</html>
其实前面已经说了三种vue属性：el、data和methods，它们一个是找到作用域，一个是设置数据和属性，一个是增加方法。
基本语法的其他语法介绍中介绍了字符串反转的例子，反转的过程写到了标签中，没有做到标签和js的分离，计算属性就可以改善这个问题
下面是将反转内容写到属性中的方法：
computed:{ reverseMessage:function(){ return this.message.split(‘‘).reverse().join(‘‘); } },
使用的时候，直接在模板中调用计算属性中自定义的reverseMessage方法即可
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03-vue的计算和倾听属性</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.app‘,
data:{
message:‘ABCDEFG‘,
},
computed:{
reverseMessage:function(){
return this.message.split(‘‘).reverse().join(‘‘);
}
},
})
}
</script>
</head>
<body>
<div class="app">
<!-- <p>{{message.split(‘‘).reverse().join(‘‘)}}</p> -->
<p>计算属性:{{reverseMessage}}</p>
</div>
</body>
</html>
当我们修改一个值的时候，可以用倾听属性来观察新值和旧值
倾听属性用的是watch，给一个值设置一个function方法，然后传入两个数就可以分别记录新值和旧值
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03-vue的计算和倾听属性</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.app‘,
data:{
counter:0,
},
watch:{
counter:function(newVal,oldVal){
console.log(newVal + ‘------‘ + oldVal);
}
}
})
}
</script>
</head>
<body>
<div class="app">
<button @click="counter += 1"> 累加量:{{counter}}</button>
</div>
</body>
</html>
过滤器属性是对内容进行判断过滤用的它使用的是filters，增加过滤器和增加方法是很类似的。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.box‘,
data:{
money:1000,
},
filters:{
moneyFiter:function(a){
if (a > 100) {
return "￥" + a;
}else{
return "小零钱"
}
}
}
})
}
</script>
</head>
<body>
<!-- money=50 ￥50 -->
<div class="box">{{money | moneyFiter}}</div>
</body>
</html>
上面设置的是局部的过滤器，还有一种是设置全局的过滤器：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
// 全局的过滤器
Vue.filter(‘movie‘,function (a) {
if (a > 18) {
return "允许看电影!"
} else {
return "小毛孩!"
}
})
var vm2 = new Vue({
el:‘.app‘,
data:{
age:28
}
})
}
</script>
</head>
<body>
<div class="app">{{age | movie}}</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>04-class和style的绑定</title>
<style>
.red{
color:red;
}
.font{
font-size: 50px;
}
.line{
text-decoration: underline;
}
</style>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.box‘,
data:{
cla:"red font",
isTrue:false,
isRed:true,
classObj:{
red:true,
font:true
},
classList:[‘red‘,‘line‘],
style01:{
"font-size":"30px"
},
style02:{
"font-weight":"bold",
},
}
})
}
</script>
</head>
<body>
<!-- class 样式类名称 -->
<div class="box">
<!-- style ===== -->
<!-- 方式二：通过sytle列表
<p :style="[style01,style02]">style第二种写法</p> -->
<!-- 方式一：通过修改style值
<p :style="style01">style第一种写法</p> -->
<!-- ============== class 样式类名称-->
<!-- 方式五：通过data中变量列表来改变
<p :class="classList">5.class 变量的列表List</p> -->
<!-- 方式四：通过标签变量列表修改
<p :class="[‘line‘,‘font‘]">4.class 变量的列表</p> -->
<!-- 方式三：通过data中字典中对css类的判断改变css值
<p :class="classObj">3.class 变量的对象</p> -->
<!-- 方式二：通过对css类在标签中进行判断，然后改变css属性
<p :class="{line:isTrue,red:isRed}">2.class 变量的{类名称:变量}</p> -->
<!-- 方式一：通过直接修改class值来改变css属性
<p :class="cla">1.class 变量的字符串</p> -->
</div>
</body>
</html>
介绍v-show,v-if,v-else这三个命令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>05-条件渲染</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.app‘,
data:{
isFirst:6,
isShow:true
}
})
}
</script>
</head>
<body>
<div class="app">
<!-- v-show 显示
实质 display:none
注意在vue中使用v-show ;原先css代码不能设置display属性
-->
<p v-show="isShow">v-show 是否显示标签</p>
<!-- <p v-if="isFirst == 1">条件渲染 第一个标签</p>
<p v-else-if="isFirst == 2">条件渲染 第222222个标签</p>
<p v-else-if="isFirst == 3">条件渲染 第3333个标签</p>
<p v-else>条件渲染 第4444个标签</p> -->
<!-- <p v-if="isFirst">条件渲染 第一个标签</p>
<p v-else>条件渲染 第222222个标签</p> -->
<!-- v-if 如果是false 删除了标签 -->
<!-- <p v-if="isFirst">条件渲染 第一个标签</p> -->
</div>
</body>
</html>
注意：v-show和css中的display会有冲突，需要禁用css中的display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-vue的基本使用</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.box‘,
data:{
itemList:[1,2,3,4,5,6],
indexList:["A","B","C","D"],
objData:{
name:‘马云‘
},
dataList:[
{
name:"张一鸣",
age:‘60‘
}, {
name:"马化腾",
age:‘16‘
},
]
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- <div v-for="item in itemList">{{item}}</div> -->
<ul class="list">
<!-- 列表渲染 -->
<li v-for="item in itemList">{{item}}</li>
<!-- 这个用法和python类似，v-for中的item就是模板中的item，这个会自动遍历和渲染 -->
<li v-for="(item,index) in indexList">
<!-- 两个参数：一个是内容，一个是下标 -->
{{index}} ------- {{item}}
</li>
<!-- 2.只有一个对象 -->
<li v-for="obj in objData">
<!-- 这个遍历出来的键值对值显示值 -->
{{obj}}
</li>
<li v-for="(obj,key) in objData">
<!-- 两个参数：一个是值，一个是键 -->
{{key}}--------{{obj}}
</li>
<!-- 3.批量的对象集合 -->
<li v-for="dataObj in dataList">
<!-- 这个就相当于遍历出来字典 -->
{{dataObj.name}} ----- {{dataObj.age}}
</li>
</ul>
</div>
</body>
</html>
事件处理中包括两个部分，一个是阻止事件传递，一个是阻止默认的提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07-事件的处理</title>
<script src="js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:‘.box‘,
data:{
},
methods:{
fnFather:function(){
alert(‘father‘);
},
fnSon:function(){
alert(‘son‘);
},
fnSubmit:function(){
alert(‘提交事件‘);
},
fnBtnSub:function () {
alert(‘提交按钮点击‘)
}
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- 阻止默认的提交事件 -->
<!-- 两种方式：一个是修改action，一个是修改click -->
<!-- 方式一： -->
<!-- <form action="" @submit.prevent="fnSubmit"> -->
<form action="">
<input type="text" name="user">
<!-- 方式二 -->
<input type="submit" @click.prevent="fnBtnSub">
</form>
<!-- 阻止事件的传递 @click.stop-->
<div @click="fnFather" class="father" style="background:red">
father
<div @click.stop="fnSon" class="son" style="background:green">son</div>
</div>
</div>
</body>
</html>
标签：完整 参数 -o sage 自动 直接 charset 电影 user
原文地址：https://www.cnblogs.com/kuxingseng95/p/9021805.html
