Vue.js 学习笔记
Vue.js 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js实例化</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<div>
<p>{{msg}}</p>
</div>
<!-- 导入vue.js文件 -->
<script src="./vue.js"></script>
<!--以下是导入网站资源-->
<!-- <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script> -->
<script>
new Vue({
el:'#app',
data:{
msg:'WeChat'
}
})
</script>
</body>
</html>
在上述案例中，插值表达式{{ }}里面是个变量，div是用id选择器，所以下面就是#app;
<div id="app">
<p>{{msg}}</p>
</div>
在实例化是和Vue绑定的，而下面的只是一个div盒子，没有绑定（即没有获取或者指向该标签）
<div>
<p>{{msg}}</p>
</div>
其次，下面为导入的Vue.js文件，上者为本地导入，下者是网站导入。
在实例化Vue时，注意格式，需要new来完成，el:#app是对象指向第一个div，通常是id选择器，也可以是类选择器，等。存放在Vue里的数据是在data:{}中，这里就简单的设置一个变量为msg名字为WeChat的值。
插值语法
接下来，简单说说运算符，和js其实差不多
<div id="app">
<p>{{msg}}</p>
<p>{{num + 10}}</p>
<p>{{ num >= 10}}</p>
<p>{{ num % 2 == 0?`${num}是偶数`:`${num}是奇数`}}</p>
</div>
也额外添加一个属性
<script>
new Vue({
el:'#app',
data:{
msg:'WeChat',
num:20
}
})
</script>
可以自行在VSCode中运行试试。
结果：
可以进行在浏览器上进行修改：
那么此时的body上显示的是：
注意：在VSCode中运行打开的浏览器的“检查”，如果无法找到Vue，可以在该文件夹中，双击打开文件，或者将文件拖至谷歌浏览器中打开。
插值表达式是不能写语句的，如分支语句、循环语句等。
插入HTML片段
v-text= v-html
<div id="app">
<div>
差值表达式{{msg}}，很简单的。
</div>
<div v-text="msg">
遇到标签不解析，只当纯文本
</div>
<div v-html="msg">
遇到标签会解析
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'<h3>内容是标签</h3>',
}
})
</script>
结果:
第一个就是一个插值表达式，它直接将Vue中的msg变量<h3>内容是标签</h3>进行输出出来。
第二个就是v-text,结果和上面的一样，所以v-text遇到标签不会解析，而是直接当做文本来输出。
第三个就很明显，将其进行了解析，是一个h3标签的文本；所以v-html会进行解析。
v-model 指令
<button @click="msg='Hello'">修改msg的值</button>
<input type="text" v-model="msg">
<p>{{msg}}</p>
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<p>{{fruit}}</p>
<input type="checkbox" v-model="chk">
<p>{{chk}}</p>
在本次例子中，没有任何操作，以上是默认状态，可以在输入框中输入文本，在其下面会随之打印相同的文本：
当点击按钮时，就会出现如图：
也就是msg的值。
点击下拉框选择后，会把value值对应的内容打印在下方。
当点击复选框也有不同效果：
v-model这个指令一般是给表单元素使用的（输入框、密码框、单选框、文本框、下拉框等)。
作用：可以获取表单元素的值 也可以设置表单元素的值。
语法：<表单元素 v-model=“变量”></表单元素>