-
模板上的标签绑定一个事件，模板指令，写在模板标签里面
v-on:click 简写 @click=''
new Vue({
el:"#root",
template:"<p v-on:click='handleClick'>小狗哈士奇hah，{{msg}}</p>",
data:{
msg:"你好吗"
},
methods:{
handleClick:function(){
alert(123)
}
}
})
查看全部 -
v-html="变量"
输出“hello”，
没有被转译
查看全部 -
v-text="number"
="变量"
输出“<h1>hello</h1>”
转译h1，输出
查看全部 -
{{}}插值表达式
查看全部 -
vue实例中的数据，事件与方法
查看全部 -
<div id="root"></div>
new Vue({
el:"#root",
template:"<p>小狗哈士奇hah，{{msg}}</p>",
data:{
msg:"你好吗"
}
})
查看全部 -
挂载点，模板，实例之间的关系
<div id="root"></div>称为vue实例的挂载点
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:"你好吗"
}
})
</script>
</body>
</html>
查看全部 -
v-if ,v-show v-for指令 v-if 相当于判断，他的用法相信不止这些，老师应该是给我们简单举了个例子，显示与隐藏 我们在模板上加上了v-if的指令，并在实例中定义了属性值，为true显示，为false消失，最后还定义了一个点击事件，并在methods方法中定义了处理函数 点击按钮时使div模板实现显示和隐藏 那我们说到v-if和v-show的区别，相同点是两者都可以实现元素的显示与隐藏，而我们的v-if在元素消失的时候是直接将元素从DOM中删除了，而v-show只是给模板添加了display属性，这是二者的不同之处 当我们需要频繁的去进行显示与隐藏操作的时候，更推荐使用v-show，频率不高时v-if是更好的选择 v-for 指的就是循环。在使用v-for的时候可以直接在插值中定义，在数据中定义要循环处理的数组，需要注意的是，在进行循环的时候我们需要在后面加上:key值，key的值代表关键词，这个关键字我们先用数组下标index来表示，但是当数据过多时，使用下标来表示是存在一些问题的。
查看全部 -
vue中的计算属性和侦听器
计算属性：如图我们定义两个输入框，然后分别给他们进行双向数据绑定，并在实例里面定义他们分别的值，都为空，我们想要输出这个计算出来的和，那么这时我们可以进行将值分别插入到模板当中进行输出，这样是可以的，但是会造成代码的冗余 那么这时我们就引入了实例里面的另外一个方法，即计算方法，我们可以在模板中定义一个新的属性，我们在实例中computed这个属性中将其变成一个函数，然后在里面进行计算操作，最终就可以输出两个框在一起的值了。 而且他会利用缓存的结果，只有当数据发生变化时才会发生变化，提升性能 侦听器： 我们可以在实例中使用watch方法进行侦听页面数据的变化，当页面数据发生变化的时候，我们就可以在watch这个方法中去处理相关的业务逻辑，比如这个案例中数据加加。
查看全部 -
Vue中的属性绑定和双向数据绑定 属性绑定: v-bind 属性绑定，在属性前面加上这个，意思就是将这个属性和data里面的值进行绑定。只要前面加上v-bind这个后面跟的属性值就不再是一个字符串，而是一个表达式了。 v-bind: 可以简写为: 双向数据绑定: vue提供了一个指令v-model用来进行双向绑定，将v-model写在input中，即可完成输入框和数据的变化同步，即DOM可以操作数据，数据也可以操作DOM
查看全部 -
vue实例中的数据，事件与方法 我们把在vue实例中定义的数据加入到模板中，就叫做插值，模板中的值就是插值表达式 v-text v-html 是指令，在后面跟数据，表示让表达式显示对应数据里的值，他们的区别是，v-text可以识别标签，会进行一次转译，v-html不可以识别标签，他不会进行转译 又介绍了一种指令是事件处理的指令方式，v-on 也可以简写成@ 可以在标签行内绑定一个点击事件，为v-on:click="handleClick",这个函数和方法要定义在实例里面的methods方法中 面向数据编程，this指向指的就是vue实例
查看全部 -
// 挂载点和 模板 实例之间的关系 如图中 <div id="root></div>就是实例的挂载点，vue指回去处理挂载点下面的内容 挂载点下面的内容称之为模板，并且可以解析模板中的标签，不仅可以放在挂载点下，也可以写在实例里面使用template属性里面来写，在挂载点下就不用写了
查看全部 -
将js文件引入放在head里面是为了防止页面发生抖屏
我们可以通过new Vue来创建一个vue的实例
实例里面的el代表挂载点，是将数据挂载在id名为root的dom节点上 实例里面的data模块是为存放数据的 使用花括号来使用数据。
查看全部 -
<!Doctype <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"></input>
<button @click="submit">
提交
</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
<todo-item1 v-for="(item, index) of list" :key="index" :content="item">
{{item}}
</todo-item1>
<todo-item v-for="(item, index) of list" :key="index" :content="item">
</todo-item>
</ul>
</div>
<script type="text/javascript">
// 组件拆分
// 全局定义组件 todo-item
Vue.component('todo-item',{
props: ['content'], //需要使用外层参数时，需要使用props进行组件传值
template:'<li>{{content}}</li>'
})
// 定义局部组件,需要在components中定义
var TodoItem={
props: ['content'],
template:'<li>{{content}}</li>'
}
new Vue({
el: "#root",
components: {
'todo-item1': TodoItem
},
data: {
inputValue: 'hello',
list: []
},
methods: {
submit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
查看全部
举报