• Vue框架学习记录

    目录

    一.简介

    二.基本语法

    1.创建Vue实例

    ①data的两种写法：

    ②el的两种写法：

    2.插值表达式

    3.Vue指令

    ①数据绑定

    ②事件绑定

    ③属性绑定

    ④显示数据(v-text和v-html)

    ⑤计算属性

    ⑥条件渲染(v-if)

    ⑦列表渲染(v-for)

    一.简介

    概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

    特点：

    ​ Vue通过MVVM模式,能够实现视图与模型的双向绑定。

    ​ 简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

    二.基本语法

    1.创建Vue实例

    ①data的两种写法：

    1. <body>
    2.      
    3.        <div id="root">
    4. 			<h1>你好，{{name}}h1>
    5. 		div>
    6. body>
    7.  
    8. <script type="text/javascript">
    9.   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    10.   new Vue({
    11. 			el:'#root',//指定,该对象代表
      ,也就是说,这个div中的所有内容,都被当前的vue对象管理
    12. 			//data的第一种写法：对象式
    13. 			/* data:{
    14. 				name:'小李'
    15. 			} */
    16.  
    17. 			//data的第二种写法：函数式
    18. 			data(){
    19. 				return{
    20. 					name:'小李'
    21. 				}
    22. 			}
    23. 		})
    24. script>

    这里最好使用data的函数式写法，这才是在写组件时被认可的写法

    ②el的两种写法：

    1. <body>
    2.      
    3.        <div id="root">
    4. 			<h1>你好，{{name}}h1>
    5. 		div>
    6. body>
    7.  
    8. <script type="text/javascript">
    9.   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    10.         //el的两种写法
    11. 		const v = new Vue({
    12. 			//el:'#root', //第一种写法
    13. 			data:{
    14. 				name:'小李'
    15. 			}
    16. 		})
    17. 		console.log(v)
    18. 		v.$mount('#root') //第二种写法，挂载
    19.         /*
    20.   new Vue({
    21. 			el:'#root',//指定,该对象代表
      ,也就是说,这个div中的所有内容,都被当前的vue对象管理
    22. 			data(){
    23. 				return{
    24. 					name:'小李'
    25. 				}
    26. 			}
    27. 		})*/
    28. script>

    注意：

    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3. root容器里的代码被称为Vue模板
    4. Vue实例与容器是一一对应的
    5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用

    2.插值表达式

    • 功能：用于解析标签体内容
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
    1. <body>
    2.     <div id="root">
    3.         <h3>你好，{{name}}!h3>
    4.     div>
    5.  
    6.     <script>
    7.         Vue.config.productionTip = false 
    8.         new Vue({
    9.             el:'#root', 
    10.             data:{ 
    11.                 name:'小李',
    12.             }
    13.         })
    14.     script>
    15. body>

    3.Vue指令

    ①数据绑定

    1. <body>
    2.     <div id="root">
    3.         单向数据绑定：<input type="text" v-bind:value="name"><br>
    4.         双向数据绑定：<input type="text" v-model:value="name">
    5.     div>
    6.  
    7.     <script>
    8.         Vue.config.productionTip = false 
    9.         new Vue({
    10.             el:'#root', 
    11.             data:{
    12.                 name:'小李'
    13.             }
    14.         })
    15.     script>
    16. body>

    Vue中有2种数据绑定的方式：

    • 单向绑定（v-bind）：数据只能从data流向页面， v-bind可简化成只保留冒号

    • 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data，双向绑定一般都应用在表单类元素上（如：、