v-text和v-html指令的区别。
v-text指令会进行转译。
v-html指令并不会转译
2.vue中的方法和事件都是面对数据编程（而不再是基于js的dom操作），vue函数都是写进vue实例里面的methods中。
点击hello world的时候会触发handleClick事件，去执行定义的方法（methods），使页面会变成中文的你好！
4.gif
3.两种方法输出vue实例中定义的数据。
绑定属性输出
使用{{}}语法输出。
4.vue中的属性绑定和双向数据绑定
v-bind属性绑定（数据决定页面的显示），简写用：代替
效果：
v-model双向数据绑定(同步显示)（页面输入决定data的改变）
效果：
5.vue中的侦听属性。
一个简单的流程例子实现，但没有用到侦听属性。
6.gif
computed 计算属性：一个属性从另一个属性中计算出来。
image.png
fullName是通过firsName和lastName计算出来的。
7.gif
6.vue中的侦听器，通过wacth来定义，侦听某个数据的变化。
image.png
7.vue中的v-if指令和v-show的指令的对比分析。
image.png
7.gif
控制台查看DOM。
7.gif
当我点击toggle按钮，它都会把hello world标签从dom元素从删除，然后到新增，以此循环。
我们再来尝试下v-show指令。
image.png
可以发现他们在页面显示效果是一样的，但在控制台查看却不一样了。
7.gif
可以发现v-show指令下，当hello world从页面上消失的时候，实际上这个元素没有从DOM上删除，而是给它加了一个display:none CSS3的属性值。
v-if指令和v-show指令的区别：当show设置为false的时候
总结：v-if指令是从DOM直接删除，而v-for指令只是在DOM中隐藏起来
实际应用场景：
1.频繁使用某个标签进行显示和隐藏的时候，就用v-for指令
这是因为v-show指令它每一次操作都并不会走销毁dom，然后再重新创建dom的这样一个流程，它仅仅只是在页面隐藏/显示，所以应用性能高一些。
2.比如这里的div标签，如果只使用一次到几次的话，直接用v-if指令即可。
8.v-for指令，控制一组数据，又叫遍历，适用于页面内容的循环展示。
image.png
image.png
9.小组件功能开发
<html>
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<script src="vue%20.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)//把输入框的内容输出到页面
this.inputValue=''//将每次输入框的内容清除
}
}
})
</script>
</body>
</html>
组件拆分的概念。
组件可以具体理解为是某个大型页面的一部分，把一个大型的页面拆成几个细化的小部分来处理（组件化开发），下面以美团为例子，节选。https://www.meituan.com/
image.png
组件化开发方便后期的维护。
组件注册
全局组件定义：通过Vue.component（'注册名字',{模板内容}）这个形式注册的组件是全局组件（可以在任何地方使用组件）。
image.png
局部组件的定义：image.png
全局组件中，调用组件后时，外组件传参，而组件内部是通过props属性接收参数的,然后使用参数，父组件向子组件传值是通过属性传值的
父组件通过绑定自定义属性（如:content="item"）向子组件传参，子组件需要使用props接收父组件所传递的参数（如 props:['content'],）。
image.png
实现的效果和原来是一样的
挂载点，模板，实例，组件的关系（图解）
其实每一个组件也是是一个vue实例，可以把组件看成一个小实例，它同样具有vue实例的功能属性和方法。
image.png
可见，在component组件中可以使用vue实例中methods方法。
所谓的大组件，父组件其实就是整个new Vue({})实例。
而小组件，子组件，是通过注册的组件，我用图来解释。
image.png
整个挂载点之下是父组件的模板
image.png
子组件接收父组件传来的content和index2个 属性。
父组件给子组件传递是通过属性的形式，子组件通过props接收，子组件向父组件传值是发布定义模式$emit('字定义事件',值),发布一个事件，而父组件模板通过@来侦听事件，然后写在父组件的methods中。
image.png
image.png
image.png
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<script src="vue%20.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#app",
data: {
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1)
//对应的下标，删除1项
}
}
})
</script>
</body>
</html>
7.gif
网友评论