VUE基础

Vue常用语法

{{ }} 变量、表达式渲染

• {{ }} 用于输出对象属性和函数返回值

<template>
<div >  
<h1>{{message}}</h1>
<p>count is :{{counter.count}}</p>
</div>
</template>
 
<script setup>
import { ref ,reactive} from 'vue'
const message = ref('hello');
const counter = reactive({
    count:0
})
console.log(counter.count);
counter.count++;
</script>

v-html html 模板，渲染 html

用于输出 html 代码

<div id="hello-vue" class="demo">
    <span v-html="rawHtml"></span>
</div>
 
<script>
    const HelloVueApp = {
        data() {
            return {
                rawHtml: '<span style="color: red">这里会显示红色！</span>'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

v-bind

<script setup>
import { ref ,reactive} from 'vue'
const  aaid = ref('title');
const url = ref('https://cn.vuejs.org/guide/essentials/template-syntax.html')
</script>

<template>
<!--  v-bind :id attribute 绑定？ -->
<div v-bind:id = "aaid">aa</div>
<div :id = "aaid"></div>
<a :href = "url">模板语法</a>
<p>1</p>
</template>

 v-on 简写 @ 事件绑定

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

<template>
<!-- v-on：click  @click  事件监听 事件绑定-->
<button v-on:click = "increment">{{count}}</button>

<p>事件修饰符</p>
<!-- 点击事件最多被触发一次 -->
<button @click.once = "increment">{{count+1}}</button>
<!-- 单击事件将停止传递 --><!-- 修饰语可以使用链式书写 -->
<button @click.stop.prevent="say('hello')">Say hello</button>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<button @click.self="say('bye')">Say bye</button>
<!-- 提交事件将不再重新加载页面 --><!-- 也可以只有修饰符 -->

<form @submit.prevent="submit">
<input @keyup.enter="submit" />
</form>

</template>
 
<script setup>
import { ref ,reactive} from 'vue'
const count = ref(0)
function increment() { 
    count.value ++
}
function say(e) {
  alert(e)
}
let id= 0
const todos = ref([
{id: id++, text: 'aaaaa'},
{id: id++, text: 'bbbb'}

])
const newtodo = ref('')
function submit(){
  todos.value.push({id: id++, text: newtodo.value})
  newtodo.value = ''
}

</script>

v-model 绑定值（双向绑定）

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-bind 简写 : 绑定属性

<template>
<input :value = "formtext" @input = "oninput">
<input v-model = "formtext" placeholder = "type here">

</template>
 
<script setup>
import { ref ,reactive} from 'vue'
const formtext = ref('');
function oninput(e){
    formtext.value = e.target.value
}
</script>

v-if 和v-for 

v-if 用于根据表达式的真假条件来控制元素的显示与隐藏。
当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染到 DOM 中。

<template>
<button @click = "toggle">toggle</button>
<h1 v-if="type == 'B'">vue</h1>
<h1 v-else-if="type =='A'">aaa</h1>
<h1 v-else>no</h1>
<span v-show="awesome">123</span>
</template>

<script setup>
import { ref ,reactive} from 'vue'
const awesome = ref(true)
const type = ref('A')
function toggle(){
    awesome.value = !awesome.value
}
</script>

v-for 用于基于源数据多次渲染元素或模板块。
通过遍历数组或对象的属性来生成对应数量的元素。

<template>
<form  @submit.prevent="submit">
<input v-model="newtodo">
<button >添加列表</button>
</form>

<ul>
<li v-for="todo,index in todos">
{{todo.text}}-{{index}}
<button @click = "remove(todo)">remove</button>
</li>
</ul>
<!--object    key value-->
<ul>
<li v-for = "(key,value,index) in AAobject">{{key}}:{{value}}-{{index}}</li>
</ul>

<!--n 的初值是从 1 开始而非 0-->
<span v-for = "n in 10">{{n}}</span>

</template>

<script setup>
import { ref ,reactive} from 'vue'
const newtodo = ref('')
let id= 0
const todos = ref([
{id: id++, text: 'aaaaa'},
{id: id++, text: 'bbbb'}

])
function submit(){
  todos.value.push({id: id++, text: newtodo.value})
  newtodo.value = ''
}
function remove(todo){
todos.value = todos.value.filter((t)=>t !== todo)
}
const AAobject = ({
AAAA: 'WWWW',
BBBB: 'EEEEE'

})
</script>

表单

<template>
<input type = "checkbox">单选框
<input type="radio">按钮

<div>Checked names: {{ checkedNames }}</div>
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
</div>

<textarea v-model="formtext" placeholder="plese write"></textarea>

<div> 下拉列表多选单选<br>
selected :{{selected}}
<select v-model="selected" multiple>
<option disabled value=""  >plese SELECT ONE</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>

<p>{{formtext}}</p>
</template>

<script setup>
import { ref ,reactive} from 'vue'
const checkedNames = ref([])
const formtext = ref('');
const selected = ref('')

</script>

Vue项目结构

刚打开的空项目运行后的结构：

实际完成后项目的src结构：

views:写各种页面
router:初始状态下有两个路由，/,about
components:存储组件
main.js入口，整个组件挂载到app元素上
注：后端渲染与前端渲染：
后端渲染：每打开一个页面，服务器发送请求并且返回回来
前端渲染；只有在第一次打开（无论是什么页面），服务器将所有元素返回，同时打包在js文件中，当打开第二个或第三个等页面后，用返回的js文件直接将新页面渲染出来