Vue基础知识一
1、模板语法
（1）插值语法——容器中的两个{}
用于解析标签体(即开始标签和结束标签间的内容)：{{xxx}},xxx是表达式且可以读取data中的所有属性
（2）指令语法——用于解析标签(包括标签属性、标签体内容、绑定事件......)
v-bind:可以简写成:
Vue中有很多指令，形式为v-???，此处拿v-bind举例
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>指令语法</h1>
<a v-bind:href="url">vue官网1</a>
<a :href="url">vue官网2</a>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false
//创建Vue实例
var vm = new Vue({
//el用于指定当前vue实例为哪个容器服务，值通常是css选择器字符串
el: '#root',
data: {
// data中用于存储数据，数据供el所指定的容器去使用\
// 值暂时写成一个对象，在组件中写成一个函数
name : 'ljl',
url: 'https://cn.vuejs.org/'
}
})
</script>
</body>
2、数据绑定
（1）单向数据绑定——v-bind，数据只能从data流向页面
（2）双向数据绑定——v-model:v-model只能应用在表单类元素(输入类元素)：有value值上，因此v-model:value可简写为v-model
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
</div>
注意：el和data的另外写法：data的第二种写法函数式(学习组件后必须使用函数式)不能写成箭头函数
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？