vue学习笔记--基础学习

一.初体验

1.1Hello Vue.js

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    const app=new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{//定义数据
            message:'测试',
            name:'第一次'
        }
    })
</script>

总结：1.容器和vue实例一一对应；2.”id=app“里面的内容就是Vue的模板

二.vue模板语法

2.1插值语法：

功能：用于解析标签体内容；

写法：{{ xxxxx}}，xxxx是js表达式，也可以直接读取到data中的所有属性

2.2指令语法

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件.......）

举例：v-bind:href=“xxxxxx”或简写为 :href ="xxxxxx"

三.数据绑定

数据绑定的两种方式：

1.单项绑定（v-bind）：数据只能从data流向页面

2.双向绑定（v-model）：数据不仅能从data流向页面，还能从页面流向data

备注：双向绑定一般应用在表单类元素上

<div id="root">
		<!-- 	普通写法 -->
		单项数据绑定：<input type="text" v-bind:value="message"><br />
		双向数据绑定：<input type="text" v-model:value="message"><br />

		<!-- 	简写 -->
		单项数据绑定：<input type="text" :value="message"><br />
		双向数据绑定：<input type="text" v-model="message"><br />
	</div>


	<script type="text/javascript">
		Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

		new Vue({
			el: '#root',
			data: {
				message: '测试',
				a: '第一次',
			}

		});

	</script>

3.data的两种写法

  // data的第一种写法：对象式

      data: {

        message: '测试',

        a: '第一次',

      },

      // data的第二种写法：函数式   ，只能用普通函数，不能用箭头函数

      data() {

        console.log('///', this) //此处的this就是Vue实例对象

        return {

          message: '测试',

        }

      }