Vue-内容渲染，属性渲染指令
内容渲染
在Vue中渲染元素，用双花括号{{}}的语法进行插值，称之为插值表达式
双花括号会渲染hi里面的值
<body><div id="app">{{hi}}</div>
<script>const vm={data(){return{hi:'hello world'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>同时它也能执行js代码
<body><div id="app">{{one+1}}</div>
<script>const vm={data(){return{one:1}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>对算式进行计算
由于用双花括号无法解析标签元素,它只会将它当作damn变量的值
<body><div id="app">{{damn}}</div>
<script>const vm={data(){return{damn:'<a href="www.csdn.net">csdn</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>内容渲染指令
v-text:不会解析标签，比较少用
v-html:会解析html元素，常用
<body><div id="app"><!--v-text覆盖掉原先的内容，但并不会解析标签--><p v-text="damn">hello world</p><!--v-text覆盖掉原先的内容，但并不会解析标签--><p v-html="damn">hello world</p></div>
<script>const vm={data(){return{damn:'<a href="www.csdn.net">csdn</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>属性绑定指令
<body><div id="app"><!--v-bind属性绑定，可以在属性前面只加分号:--><p><a v-bind:href="link">csdn</a></p><a :href="link">csdn</a></div>
<script>const vm={data(){return{link:'www.csdn.net'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>两种方式效果都是一样的 ，会将link的值渲染到超链接上
