<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/vue.js"></script>
</head>
<body>
<div id="app">
<span>的插值表达式 只能写在文本里 ，标签的属性中不生效</span>
<h1>{{title}}</h1>
<h1>插值表达式 特性1：可以调用 js 中的 属性或者方法，如：字符串的长度为 {{title.length}}</h1>
<h1>插值表达式 特性2：可以做加减乘除，如：人民币 {{rmd}} 分 等于 {{rmb/100}}元</h1>
<h1>插值表达式 特性3：可以做三元运算，很重要！！如：身高{{height}} 是 {{height>=180 ?
"<span style="color: red;">男神</span>":
"<span style="color:chartreuse;">男人</span>"}}</h1>
<h1>以上 是 插值表达式 ，是 作用在 文本上的</h1>
<h1>下面的 placeholder 中使用 插值表达式 就不可以了 用别的！！</h1>
<h1>如果 想要改变 标签属性中的文本的数据 需要绑定 这个绑定叫做指令：v-bind 缩写是 :</h1>
<h1>v-bind 1) 可以绑定 数据 2) 可以绑定 样式---1.class 2.style ，3.数组 或者对象 样式的绑定</h1></h1>
<h1>数据的绑定 可以是 双向的 ，简称 ：双向绑定</h1>
<input type="text" :placeholder="searchKeyWord">
<input type="button" :value="add" >
<h1>先看数据的单向绑定 ，使用 加法 来计算</h1>
<h1>单向绑定 使用 插值表达式 获取结果 </h1>
<input type="text" :value="x">+<input type="text" :value="y">=<input type="text" :value="z"><br>
<input type="text" :value="x">+<input type="text" :value="y">={{x+y}}<br>
x:{{x}} || y:{{y}} || z:{{z}}
<h1>先看数据的双向绑定 ，使用 加法 来计算</h1>
<input type="text" v-model="x1" >+<input type="text" v-model="y1">=<input type="text" v-model="z1"><br>
<input type="text" v-model.number="x1">+<input type="text" v-model.number="y1">={{x1+y1}}<br>
<input type="text" v-model="x1">*<input type="text" v-model="y1">={{x1*y1}}
<h1>双向绑定 使用 插值表达式 获取结果 </h1>
x1:{{x1}} || y1:{{y1}} || z1:{{z1}}
<h1>让页面一刷新 就执行我们的方法</h1>
</div>
<!-- <div id="app1">
<h1>不在 vue 的作用域中</h1>
</div> -->
<script>
new Vue({
el:'#app',
beforeCreate () {
//alert("vue 生命周期第一阶段 只初始化 了 new Vue ,其他啥也没干 没啥大作用！"
},
created () {
//alert("该阶段处理所有选项 ，那么 Vue的ajax请求数据，应在这产生，即 ajax在这写 ，因 用户 还没看到页面渲染 ，Vue还挂载到 app")
//this.jiajia();
},
beforeMount () {
//alert("在挂载开始之前被调用 的方法 不常用！")
},
mounted () {
//alert("在实例挂载后被调用 的方法 常用！ 当界面被挂载就会调用！")
this.jiajia();
},
beforeUpdate () {
//alert("在数据发生改变后 ，DOM 被更新之前调用！")
},
updated () {
//alert("在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。！")
},
data:{
title:'vue的学习的增删改查',
searchKeyWord:'搜索',
add:'新增',
rmb:500,
height:190,
x:50,
y:60,
z:0,
x1:50,
y1:60,
z1:0,
},
methods: {
jiajia:function(){
this.z=this.x+this.y
this.z1=this.x1+this.y1
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
