1.声明式渲染
比如先建立一个模板:提高开发效率
//声明式渲染
export default{//默认导出 data(){ return{ num:0, uname:"张三" } } }
</script>
<template> <div> <p>{{ num }}</p> <p>{{ uname }}</p> </div> </template>
2.应用&组件
1.创建一个组件实例
2.根组件
APP.vue为根组件。
组件实例property
3.模板语法
1.插值
文本
数据绑定最常见的形式就是使用双大括号
<span>Message:{{msg}}</span>
v-once指令,当数据改变时,插值处的内容不会改变。
<p v-once>{{ uname }}</p>
原始HTML(让内容以HTML的形式来使用)
v-html指令:<p>{{ msg }}</p> <p v-html="msg"></p>
v-bind:动态的绑定属性的内容(语法糖:用冒号)
<!-- v-bind:动态的绑定属性的内容 -->
v-bind绑定
<button @click="changeColor">改变颜色</button>
使用简单的JavaScript表达式
<button @click="changeColor">改变颜色</button>使用定义方法 <button @click="id='d2'">改变颜色</button>使用简单的JavaScript表达式
指令:一般是单个表达式
职责:当表达式的值改变时,将其产生 的连带影响,响应式的作用于DOM.
<p>{{ num+1 }}</p>
<p>{{ uname.split('').reverse().join('')}}</p>
v-on 语法糖:@
4.计算属性和侦听器
4-1:计算属性
只要依赖值不变,那么不会重新计算
计算属性有缓存,同样的数据,被调用的时候,会读取缓存的数据,但是methods,会每次都会重新执行代码。