基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="vue.js"></script>
</head>
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{name}}</h2>
<h2>{
{firstName + lastName}}</h2>
<h2>{
{firstName + ' ' + lastName}}</h2>
<h2>{
{counter*2}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'vue初体验',
name:'哈哈',
firstName:'小笨蛋',
lastName:'小傻瓜',
counter:100
}
})
</script>
</script>
</body>
</html>
v-once的使用
只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过。
当你手动改 message 的值时就会发现它只会渲染一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imgURL" alt="">
<a v-bind:href="ahref">百度一下</a> -->
<!-- <h1>{
{ message }},aa </h1> -->
<!-- <h1 v-pre>{
{message}}</h1> -->
<!-- <h1 v-text="message">你好</h1> -->
<h2>{
{message}}</h2>
<h2 v-once>{
{message}}</h2>
<!-- <h1 v-html='url'></h1> -->
<!-- <h2>当前计数:{
{counter}}</h2> -->
<!-- <h3>{
{firstName + ' ' + lastName}}</h3> -->
<!-- <h2>{
{counter+2}}</h2> -->
<!-- <button type="button" @click="add">+</button>
<button @click="sub">-</button> -->
<!-- <ul>
<li v-for="ass in movies">{
{ass}}</li>
</ul> -->
</div>
<script>
new Vue()
var app = new Vue({
el: '#app',
// el:document.querySelector(),
data: {
message: '一只高级猿',
name: '哈哈',
// firstName: 'copy',
// lastName: '