2023年02月16日vue.js 教程
1.创建第一个vue
vue 应用 结构 可以分成两个部分 ， 一个是视图，一个是脚本；
脚本有两个参数：el 和data
视图
<div id="app">
{{ message }} {{name}}
</div>
脚本
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
// 数据初始化
message: 'Hello Vue!',
name : "Vue"
}
});
</script>
2.数据与方法
var vm = new vue{
}
vue 实例创建的时候， data 对象中的所有属性都会被添加到vue的响应式系统中去「定义的特殊 声明不可改动的属性除外」，当数据改动后，
3. 模板语法-指令
- 指令：
v-if = "变量" ，控制视图标签是否显示
v-bind: href = "变量" ，控制 超文本跳转的地址或文件
所有上述的变量都是在 new view 中的daga 声明以及初始化 - 指令修饰符：
@click.stop ,stop 就是对点击事件的修饰，一般是对属性的修饰动作
4.class 和style绑定
<div id="app">
<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
style="width:200px; height:200px; text-align:center; line-height:200px;">
hi vue
</div>
<div
:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
5.条件渲染
- v-if 指令 用于条件性的渲染一块内容 这块内容只会在指令的表达返回真的时候被展示或者被渲染
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- v-show = ture 的时候会展示
区别： v-if 是惰性的，只有对应的正确状态才会被渲染（打包代码是不可看到）
而v-show 是都会被渲染，只不过，正确的分支会被显示，而不正确的分支会被隐藏（打包代码是可看到）
这样就说明 如果 页面频繁切换则需要使用v-show ，如果不需要频繁切换 就用v-if ，或者从代码安全性触发使用if
6. 列表渲染
- v-for 指令可以通过一个数组来渲染 一个列表
- key = "index" 可以在渲染的时候根据 index（是根据实际工作而写的变量，和数据库的主键一个意思）索引来按照顺序渲染，（如果数据渲染中顺序发生变化，页面也会变化）
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }}
</li>
</ul>
<ul>
7.事件绑定
可以使用 v-on 指令监听DOM 事件，并且调用自定义函数
v-on 事件修饰符
stop 阻止单击事件继续传播
prevent 提交时间不再重载页面
capture 捕获事件 元素自身触发的事件再此优先处理，后才交由内部处理
self， 只有事件是当前元素触发的 才调用
<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />
<button v-on:dblclick="greet('abc', $event)">{{counter}}</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue"
},
methods:{
greet : function (str, e){
alert(vm.counter)
return vm.counter + "✅"
}
}
});
</script>
8. 表单输入绑定
基础用法 ：
-
v-mode 指令在表单 input textarea select 元素上创建双向数据绑定，会根据控件类型自动选择正确的方法来更新元素。其作用就是监听用户的数据，更新数据。
-
v-mode 会忽略表单元素 的value 、checked 、 selected 特性的初始值，而总是将vue 实例的数据作为数据来源，你有应该通过JavaScript 在组件的data 选项中声明初始值
-
v-model 在每部为不同的输入元素使用不同的属性，抛出不同的事件
text 和textarea 元素使用 value 和input
CheckBox和radio 使用 checked 和change
select 将value 作为prop ，将change 作为事件
在使用输入法输入中文日文或者韩文的时候 v-model 不会再输入法组合文字期间更新，如果希望更新则使用input
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message2 }}</p>
<br />
<div style="margin-top:20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<div style="margin-top:20px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<button type="button" @click="submit">提交</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "test",
message2 :"hi",
checkedNames : ['Jack', ' '],
picked : "Two"
},
methods: {
submit : function () {
console.log(this.message);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
9 组建基础
props 可以用来定义组件内的 属性
定义一个vue 组件：
Vue.compoment( 'button-counter',{
props:['titles'],
data : function(){
return {
count :8
}
},
//template 是模板样式
template: '<button v-on:click = "count++"> you clicked me {{count}} times. </button>'
}
)
------------
使用组件
<div id = "app">
<button-counter><button-counter>
</div>
10. 组件注册
vue的组件是都是全局注册的
组件的局部注册：
1. 在 new vue 中实现组件 ，也就是局部注册
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
},
components:{
test : {
template:"<h2>h2...</h2>"
}
}
});
2.模块系统中注册组件
建议是在项目中创建一个组件文件夹 compoment 中放置所有的通用组件，当有地方需要使用的时候在文件内部再引用使用：
import CompomentA form './CompomentA' // 从 文件夹 CompomentA 中引用组件CompomentA
import CompomentB form './CompomentB'
export default {
compoments: {
compomentA ,
compomentB
},
}
11.单文件组件
什么是单文件组件：
single-file compoment ，扩展名为 .vue.
单文件组件主要是解决：
全局定义 - 组件的全局定义要求每个组件命名不同
字符串模板- 缺乏语法高亮，在html 多行的时候需要用到丑陋的\ 连接符
不支持css - 意味着当htnl 和javascript 组件化的时候，css 明显被遗漏
没有构建的步骤 - 限制使用html 和javascropt 而不能使用预处理器，如pug 和babel
准备工作：
安装 npm
npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。
npm -v
由于网络原因 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue-cli
脚手架工具
cnpm install -g @vue/cli
安装 webpack
webpack 是 JavaScript 打包器(module bundler)
cnpm install -g webpack
单文件组件主要氛围三个部分：
template 、script、style
模板，脚本，样式css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！