文章目录
什么是Vue？
Vue.js 是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。
Vue基础语法
- 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 启动的 Var = new Vue({ })
基础语法
el : 它是获取执行vue的dom元素 - 初始化范围
data：储存数据
methods：执行的方法
- 绑定数据
{{ }} 或者 v-text = " " 只能绑定纯文本；绑定html vue中 v-html
2)事件绑定
v-on:click=" " 简写：@click=" "
绑定事件 事件中有event对象 函数采纳数为 $event
操作数据 通过this操作
3)其他指令
v-for=“item in list” 循环 item循环到的数组值
v-for ="(item,key) in list" key循环到的下标index
v-model=" "表单元素value 不可直接{{ }} 获取 ，需要在vue初始化设置一下
v-if 布尔值 为true 代表节点消失
v-if 与 v-else-if v-else 可以构成判断
v-show布尔值 为true 代表节点设置了display：none属性
v-once 一次渲染
处理用户输入v-model
<div id="app">
<!--v-model是一个指令，表示数据的双向绑定 关联实例中的data属性，在v-model的值里面跟的数据是一个js对象 -->
<!-- 在vue中使用{{}}进行数据的绑定显示,里面的内容也是一个js表达式 -->
<input type="text" v-model="txt" /> //输入内容反向
<p>
{{
txt
.split('')
.reverse()
.join('')
}}
</p>
<hr />
<input type="text" v-model="msg" /> //另外一种方式，正常输出
<p>{{ msg }}</p>
</div>
<script src="./libs/vue.js"></script> //引入vue.js文件
<script>
var app = new Vue({ // new关键字创建一个类的实例
el: '#app', // el表示实例的挂在节点,这是一个元素选择
data: { // data属性表示实例中使用的数据
txt: '',
msg: '',
},
});
</script>
以上是一个最基础的vue中v-model 例子，接下来看一下v-for
<div id="app">
<p v-for="(v, i) in people" :key="i">
索引:{{ i }},值:<span>{{ v }}</span>
</p>
</div>
<script src="./libs/vue.js"></script>
<script>
// vm
var app = new Vue({
el: '#app',
data: {
people: [
{ name: ' 新世界的卡密 半个橙子', age: 22,},
{ name: '啦啦啦',age: 23, },
{ name: '少帮主', age: 22,
},
],
},
});
<!-- v-for
循环每一项内容，可以循环数组，对象，字符串，数字
v-for="v in data" v表示每一项的值
v-for="(v,i) in data" v表示每一项的值 i表示索引
在循环的时候需要为其添加一个key值，此值的作用是方便找到元素 好做页面更新
: 表示数据绑定,属性值为一个js表达式
-->
1.ajax 调用
<div id="root">
<ul>
<li v-for="(p, i) in postss" :key="i">{{ i + 1 }}、{{ p.title }}</li>
</ul>
</div>
<script src="./libs/vue.js"></script>
<script src="./libs/axios.js"></script>
<script>
var vm = new Vue({
el: '#root',
data: {
postss: [],
},
});
// 获取数据进行展示
axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
vm.postss = res.data;
});
</script>
绑定属性 v-bind : id = “data内的属性值” 或者 ：id = " data内的属性值 " 等这两种方法 ；不只绑定id 像 src title class name 等属性写法一样 ！！！
计算属性 放在computed:{ 函数} 效率高 ，
methods设置效率低
1）v-show 小例子
- v-show 控制组件的显示和隐藏 设置 display
<div id="app">
<div class="ball" v-show="isShow"></div>
<!-- @click 绑定事件 -->
<button @click="toggleHandle">{{ isShow ? '隐藏' : '显示' }}</button>
// <button @click="toggleHandle">点击按钮</button>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
// 绑定的方法都写在这里
toggleHandle() {
// alert('toggle clicked');
this.isShow = !this.isShow;
},
},
});
</script>
一个页面多个实例？
<div id="app">
<input type="text" v-model="person.name" />
<input type="text" v-model="person.age" />
<p>我的名字是{{ person.name }},我今年{{ person.age }}岁了</p>
</div>
<hr />
<div id="root">
<input type="text" v-model="person.name" />
<input type="text" v-model="person.age" />
<p>我的名字是{{ person.name }},我今年{{ person.age }}岁了</p>
</div>
<script src="./libs/vue.js"></script>
<script>
// 每一个页面中可以有多个vue实例
var app = new Vue({ //实例一
el: '#app',
data: {
person: {
name: '',
age: '',
},
},
});
var app = new Vue({ //实例二
el: '#root',
data: {
person: {
name: '',
age: '',
},
},
});
</script>
2）v-for 简单小例子
<script src="./libs/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="aaa">
<ul>
<li v-for="(t,i) in tog">{{t.aa}}{{t.bb}}<span>后索引值：{{i}}</span></li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#aaa",
data: {
tog:[
{aa:起小点},
{aa:大哥gogoing},
{bb:雪鱼} ]} })
</script>
// 起小点 后索引值：0
// 大哥gogoing 后索引值：1
// 雪鱼 后索引值：2
3）v-bind 行间样式设置 展现样式
- v-bind 单个使用，展现样式
v-bind:style = “{ color:activeColor, fontSize:fontSize+“px”}”
data:{
activeColor : “red”,
fontSize : 30
}v-bind:style的对象语法十分直接一一看着非常像CSS ， 其实它是一个JavaScript对象；
2.v-bind 数组样式形式设置
v-bind:style=" [styleObjectA,styleObjectB] "
data:{
styleObjectA : {color:“red”},
styleObjectB : {fontSize:“30px”}
4）v-bind 类名class设置 展现样式
- 第一种 v-bind ： class
v-bind:class="{“class-a” : isa , “class-b” : isb }"
isa isb 值为true 添加相应类名
isa isb 值为false 不添加类名
- 第二种：对象形式设置
<div:class = “calssobj”> < /div >
classobj : { active:true," class-a ": true,class-b ": true,}
如果很难理解，请看下面 class样式绑定的小例子吧！！
5）class样式绑定例子 展现样式
<div id="app">
<div class="nav">
<ul>
<!-- 通过点击事件设置selIndex的值 -->
<li :class="selIndex==0? 'cur':''" @click="selIndex=0">首页</li>
<li :class="selIndex==1? 'cur':''" @click="selIndex=1">列表页</li>
<li :class="selIndex==2? 'cur':''" @click="selIndex=2">关于我们</li>
</ul>
</div>
// 以上 用v-bind：class 设置样式，当触发class属性值的时候，三元运算符就起了作用；
<ul>
<li : style="p.age<=16? stylesGreen: ' ' " v-for="(p, i) in people" : key="i" >
{{ i }}、{{ p.name }}
</li>
</ul>
// 以上用 v-bind：style 设置样式，用三元运算符选择
<!-- 通过:style方式可以动态的绑定一个样式效果 -->
<!-- 通过class实现样式的绑定
1. 可以绑定一个数组,数组元素的值为样式名
2. 可以绑定一个对象,对象中的属性值为true的属性名对应的样式可以显示出来 -->
// 以下 用v-bind：class 设置样式，
<p :class="pClasses">狼王争霸赛!!</p>
<p :class="pClasses2">狼王争霸赛!!</p>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selIndex: 0, // 默认选中的值
pClasses: ['txt', 'txt-red', 'txt-26'],
pClasses2: {
txt: true,
'txt-red': false,
'txt-bgc': true,
},
people: [
{name: '毕游侠',age: 31, },
{ name: '申屠', age: 30, },
{ name: 'JY',age: 29,}, ],
stylesGreen: {
color: 'red',
fontSize: '2rem',
// backgroundColor: 'green',
},
},
});
</script>
6）v-if 控制标签显示和隐藏
- v-if 是直接在html中移除标签
- v-show是通过样式控制节点的显示和隐藏
<div id="app">
<div class="ball" v-if="isShow"></div>
<button @click="toggleHandle">{{ isShow ? '隐藏' : '显示' }}</button>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
toggleHandle() {
this.isShow = !this.isShow;
}, },});
</script>
7）filter-过滤器
<div id="app">
<input type="text" v-model="msg" />
<!-- | 后面可以跟着一个过滤器，对数据进行处理，过滤器可以跟着写多个 -->
<p>反转的数据为:{{ msg | reverseWord | upcaseWord }}</p>
<p>反转并转为小写:{{ msg | reverseWord | lowcase }}</p>
<input type="text" v-model="price" />
<p>价格:{{ price | money }}</p>
</div>
<hr />
<div id="root">
<input type="text" v-model="msg" />
<p>反转并转为小写:{{ msg | lowcase }}</p>
</div>
<script src="./libs/vue.js"></script>
<script>
// 过滤器可以对数据做一个格式化操作
// 全局定义
Vue.filter('lowcase', val => val.toLowerCase());
var app = new Vue({
el: '#app',
data: {
msg: '',
price: 0,
},
// 过滤器，局部过滤器
filters : {
reverseWord(val) {
return val
.split('')
.reverse()
.join('');
},
upcaseWord(val) {
return val.toUpperCase();
},
money(val) {
return '￥' + val + '元';
},
},
});
var root = new Vue({
el: '#root',
data: {
msg: '',
},
});
</script>
MVC
是一个开发模式,m(model)v(view)c(controller)。
model 用来存储数据
view 用来展示数据
controller 用来控制数据的展示，串联view和model
MVVM
model 是用来存储数据
view 展示数据
view-model 是实现数据和视图的双向绑定
实现：todolist 代办事项
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">事项</label>
<!-- .enter表示按键修饰符 表示按下回车键 -->
<input
type="text"
class="form-control"
v-model="content"
placeholder="请输入代办内容"
@keyup.enter="save" />
</div>
<button class="btn btn-primary" @click="save">提交</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li v-for="(t,i) in todoList" :key="i" class="list-group-item">
<span>【{{ t.status == 0 ? '未完成' : '已完成' }}】</span>
{{ t.content }}
<button @click="endHandle(i)" v-if="t.status==0">完成</button>
<button @click="delHandle(i)">删除</button>
</li>
</ul>
</div>
</div>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: '.container',
data: {
content: '',
todoList: [],
},
methods: {
save() {
this.todoList.push({
id: Date.now(),
content: this.content,
status: 0,
});
this.content = '';
},
endHandle(i) {
this.todoList[i].status = 1;
},
delHandle(i) {
this.todoList.splice(i, 1);
},
},
});
</script>
</body>
3937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
