一、VUE简介
VUE是一套前端框架，尤雨溪，前谷歌的软件工程师。
框架：提供一整套解羞方法(显示，效果，请求访问)
库：只提供针对某一种情况的解决方案
-
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
-
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
-
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
-
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
1、类比JQUERY
| jquery | vue | 说明 |
|---|---|---|
| $().text() | {{ … }} | 插值表达式,为标签设置文本内容 |
| $().attr() <br/> $().prop() | v-bind | 为标签设置属性 |
| $().val() | v-model | 获取或为表单设置值 |
| $().html() | v-html | 获取或为标签设置内容包含html值 |
二、VUE入门案例
1、搭建vue环镜
-
引入vue.js支持
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -
创建vue入口和实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--使用插值表达式显示变量中的值-->
<p>我的名字是：{{username}}</p>
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue对象
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
data:{//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
//数据，所有需要显示在vue界面上的数据，都需要先在data属性中进声明，否则页面无法解析
//凡是在vue界面上需要动态显示的数据，必须先在data函数中进行变量声明，然后在vue挂载点中进行调用
username:"张三"
},created(){//相当于jquery的ready方法，当vue加载完成后，自动执行
//调用变量
this.username="王五";
}
});
</script>
</html>
2、vue页面构成
-
模板(html代码)
-
数据(JS代码vue实例中的内容)
-
指令：配合数据(vue实例)在模板中对数据显示做效果(判断，循环)，指令一般以v-开头
3、data函数的写法
-
写法一:
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
data:{
user:{username:'张三',age:18}
}
});
</script> -
写法二：
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
return {
users: { //对象
username: "a",
age: 19
}
}
}
});
</script>
需要注意的是，虽然 data 属性的写法有 2 种，但是
-
第 1 种的
data: { ... }对象的写法在未来会出现问题！某些场景中它不适用。 -
第 2 种的
data () { return {...} }函数的写法则一直有效。<font color=red>以后我们使用第二种方式，不在使用第一种方式</font>.
三、VUE常用指令
1、循环指令v-for
-
基本用法
<ul>
//us表示保存循环出的每个值
//in循环关键字，相当于foreach的:
//userList要循环的数组
<li v-for="us in userList">姓名：{{us.username}} 年龄：{{us.age}}</li>
</ul> -
获得循环下标
<ul>
//us表示保存循环出的每个值
//index表示循环的下标
//in循环关键字，相当于foreach的:
//userList要循环的数组
<li v-for="(us,index) in userList">序号:{{index+1}} 姓名：{{us.username}} 年龄：{{us.age}}</li>
</ul>
2、判断指令v-if v-else
v-else-if 和 v-else是用来判断
<body>
<div id="app">
<!--
14> 未成年
15 20 少年
21 30 青年
-->
<p v-if="age<14">未成年</p>
<p v-else-if="age>=15 && age<=20">少年</p>
<p v-else-if="age>=21 && age<=30">青年</p>
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
return {
age:18
}
}
});
</script>
3、标签属性绑定v-bind
为标签设置属性值
语法：
v-bind:属性名="变量名"
案例：
<div id="app">
//disabled:属性名称
//disabStr:disabled属性的值
<input type="button" v-bind:disabled="disabStr" value="我是按钮">
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app",
data(){
return {
//变量，用来保存disabled属性的值
disabStr:false
}
}
});
</script>
4、v-bind为标签绑定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.colorstyle{
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<p>当前已经过了：{{time}}</p>
<!--
colorstyle:类样式的名称
data函数中的变量，是一个布尔值
-->
<input type="button" v-bind:disabled="disabStr"
v-bind:class="{'colorstyle':colorcss}"
value="我是按钮">
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
return {
disabStr:false,
time:0,
colorcss:true //控制是否显示样式,true表示显示 false：不显示
}
},created(){
setInterval(()=>{
this.time++;
this.disabStr=!this.disabStr;
},1000);
}
});
</script>
</html>
5、v-model双向数据绑定
-
v-bind：用来为标签设置属性值，只能将data函数中的变量值赋给属性
-
v-model：主要用在表单上，获得表单的数据并保存到data的变量中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
<p>
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
</p>
<p>你的性别是：{{sex}}</p>
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app",
data(){
return {
msg:"你好啊",
sex:''
}
}
});
</script>
</html>
6、添加html到标签指令v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="str" style="border: 1px solid red; width: 300px;height: 300px"></div>
<input type='button' v-on:click='btnAdd' value='添加图'>
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app",
data(){
return {
str:""
}
},methods:{
btnAdd(){
this.str="<img src='images/06.jpg' width='200' height='200'>";
}
}
});
</script>
</html>
标签：Vue,vue,标签,绑定,实例,new,data 来源： https://www.cnblogs.com/Peace123/p/15424243.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。