Vue模版基础语法(Vue笔记:一)

Vue模版基础语法(Vue笔记:一)

---

Vue模版的作用：

• 结合模版中的变量和Vue实例的data实现改变数据改变视图(单向绑定)

Vue模版的基础语法：

• #app元素内部才能使用Vue语法
• {{数据}} 在Vue模版中数据写在{{}}内，可以与Vue实例data中的数据实现单向绑定，数据改变视图改变
    {{数据}}可为以下类型
    1: js 数据
    2: 表达式 输出表达式运行结果
    3: 三元运算符 运算结果
    4: data中的key的vlaue
    5: methods中函数执行的return返回值
• el: Vue实例下的对象，value填要挂载的DOM对象如#app
• data: Vue实例下的对象，value是Vue中要使用的数据，可以与模版中的{{数据}}实现单向绑定(即数据改变视图也随着改变)
• methods: Vue实例下的对象，value是自定义vue中需要的函数，在methods中可以通过this.value获取Vue实例中data下的变量

<!-- Vue模版 #app内的内容 -->
<!-- 只有#app内部才能使用vue的语法 -->
<div id="app">
	<!-- {{模版语法}} -->
	<h1>{{'i am 爆料称'}}</h1>
	<h2>{{message}}</h2>
	<h3>{{1+1}}</h3>
	<h4>{{ num === 1 ? "正确": "错误"}}</h4>
	<h5>{{foo()}}</h5>
	{{tzof}}
</div>
<script>
	// 实例化vue对象
	// 参数为对象
	var app = new Vue({
		// 选择器，作用指定vue中根标签，被选中的元素内部可以使用vue的模版语法
		// 注意：最好#id选中模版
		// 注意：一个页面推荐只选中一个模版
		el: '#app', // 类似于document.querySelector('#app')
		// data中指定app模版所需要的数据
		data: {
			message: 'Hello Vue!',
			num: 1,
			tzof: "i'm tzof",
		},
		// 自定义vue中需要的函数
		// methods作用定义页面中需要的函数
		// 赋值对象。对象中key都是自定义的函数
		methods: {
			foo(){
				return 'foo执行';
			},
			look(){
			console.log(this.message)
			},
		}
	})
</script>

 
 

(Vue笔记:一    date:2021-03-05)