编辑工具：VS code或者notepad都是不错的选择，开源并且社区活跃度不错，选他没错
- 直接搜索对应关键词即可下载官方版本，免费使用
- 贴一下网址：vscode工具的下载链接
- vscode下载和安装工具教程：vscode
下载vue源码：vue下载网址
-
楼主使用的是引入的方式，先点击开发版本，然后将里面的内容复制Ctrl+A 然后Ctrl+c ，再创建vue.js文件粘贴过去即可；
-
第一次使用vscode所以都不会用，首先左上角创建一个file保存后选择修改文件名和文件类型，创建HTML可以直接按！+Tab键添加HTML模板（vscode并不是在创建的时候选择文件类型，而是在保存的时候选择文件的类型并且创建名字这点和idea不同，但是mysql中保存也是这样，能理解）
常用插件：
highlight-icemode 高亮搜索
open in browser vs中打开html到浏览器
LiveReload 浏览器和vs中动态显示
Chinese (Simplified) Language Pack for Visual Studio Code 中文导航栏
translate to chinese 翻译(translate to chinese)
IntelliJ IDEA Keybindings 与idea的快捷键映射 
创建一个实例
- vs中预览HTML文件以及vscode中安装浏览器： 安装教程
使用vue与原来不同的是我们不需要对dom元素直接操作，使我们着重对数据的编写，div标签中使用占位符，vue接管dom的操作，页面成功显示
vue中挂载点、模板、实例之间的关系
- 简而言之，Vue为实例，div为vue实例的挂载点，template为模板，用于挂载点展现的内容
- 将下面的div元素称为vue实例的挂载点，因为div的id和实例el所选中的id是同样的
vue实例只会处理el属性所对应的id的所对应的id元素，模板指的就是挂载点中的内容，可以写在template
Vue实例中的数据、事件和方法
- v-html="" 会将文本内容中的标签转译为标签
- v-text="" 不会转译，之间输出内容
- v-on:click=“functionName” 为元素添加点击事件，可以简写为@click="functionName"
代码示例：
new Vue({
el: "#root",
data: {
content: "<h1>hello</h1>",
msg: "hello "
},
// methods中定义点击事件中的众多方法
methods: {
// 对应上面的div点击事件，定义在Vue对象中
handleClick: function () {
// alert(123) 点击后弹窗123
//this代表当前对象Vue中data的对应数据；点击div标签后触发vue实例的点击事件handleClick（）
// 事件中将content的原本hello内容替换为world内容
this.content = "world"
}
}
})
完整代码图
属性绑定和双向数据绑定
- title=“this is hint” : title属性代表鼠标悬浮标签上时所给的提示
- v-bind:title="'str '+title"（v-bind：可以直接简写为一个冒号：） : 代表将title中的title值绑定的是对象中data的title属性所对应的值故只要有v-bind 就代表后面属性所对应的字符串不是字符串了，而是js表达式，代表的是data的属性,可以写很多代码，如果确实是想标识字符串，可以在双引号中使用单引号代表字符串
- v-model=“title” 的作用是v-bind的增强。v-bind只能将data中指定名字的变量名数据绑定到元素中，无法在元素改变的时候让改变量名也随之变化，例如input输入框，既可以用于展示数据也可以用于修改数据，这时使用v-model才能发挥他的正真作用
代码示例:
<!-- v-bind 可以简写为“：”，代表将title中的title值绑定的是对象中data的title属性所对应的值
故只要有v-bind 就代表后面属性所对应的字符串不是字符串了，而是js表达式，代表的是data的属性，
可以写很多代码，如果确实是想标识字符串，可以在双引号中使用单引号代表字符串
-->
<div id="root">
<div :title="title">hello world</div>
<!-- 使用v-model实现双向数据绑定 -->
<input v-model="title">
<div>{{title}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "hello world",
content: "Vue",
title: "this is hello world"
}
})
</script>
代码截图:
效果图：
Vue中的计算属性和侦听器
- computed 计算属性（性能要求较高，依赖的属性发生变化才能计算，否则取内存中的值)，通过多个变量值来计算一个值的结果；作用：一个属性的值是根据其他属性或者多个属性计算得到结果
- watch 侦听器 作用是去侦听某一个数或者计算属性发生变化，如果发生变化需要相关的处理，则可以使用watch侦听器
代码示例：
<div id="root">
姓：<input v-model="firstName">
名：<input v-model="lastName">
全名：<div>{{fullName}}</div>
改变次数:<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
//computed： 计算属性（性能要求较高，依赖的属性发生变化才能计算，否则取内存中的值）
computed: {
fullName: function () {
return this.firstName + this.lastName;
}
},
//通过watch侦听fullName的变化
watch: {
//变化一次count次数加1
fullName: function () {
this.count++;
}
}
})
</script>
完整截图：
v-if,v-show ,v-for指令的基本使用和介绍
- v-show 通过结合show变量定义boolean值标签内的信息展示与隐藏的效果
- v-if 判断，相当于java中的if(){}，然后括号内的布尔值就是条件，满足就执行
注：v-show和v-if都可以达到标签内的信息展示和隐藏的效果，本质区别在于，v-if在不满足条件时是将dom元素直接销毁，而v-show是将dom元素的display属性设置为non，频繁切换的话show效率会更高 - v-for="(item,index) of list" :key=“index” 等同于java中的for循环，可用于循环显示数组中的元素然后展示出来；其中item代表数组中每一项的内容，index代表当前遍历的下标，list代表data中的数组名即需要遍历的数组，:key用于提高遍历的效率，提升渲染度
代码示例：
<body>
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
//遍历list数组，item为每一项，index为下标
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list:[1,2,3]
},
methods: {
//用于切换元素展示和隐藏
handleClick: function () {
//点击后切换show的值
this.show = !this.show;
}
}
})
</script>
截图：
TodoList功能开发
实现的效果：在输入框中输入值，点击提交后提交的值显示在页面上，并每次提交清空输入框的值
代码示例：
<div id="root">
<div>
//双向绑定数据
请输入：<input v-model="inputValue" />
//添加绑定事件
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item ,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
//input框中原来的值
inputValue: "hello",
//展示的list
list: []
},
methods: {
//button的点击事件
handleSubmit: function () {
//将用户提交的数据添加到list中
this.list.push(this.inputValue)
//提交完成后将list清空
this.inputValue=''
}
}
})
</script>
代码截图：
TodoList中组建的拆分
上面项目中什么地方能够拆分：<li>标签中由于是在显示输入框中的消息，如当标签内容很庞大的时候，可以对器进行组建拆分
定义一个全局组件代码示例：
//使用组件
<todo-item></todo-item>
//定义组件（全局组件）
Vue.component('todo-item', {
//组件的模板
template: '<li>item</li>'
})
完整图：
定义一个局部组件相对麻烦，直接上图：
组建拆分后完整版代码：
<div id="root">
<div>
请输入：<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item">{{item}}</todo-item>
</ul>
</div>
<script>
var TodoItem={
//代表使用该组件时传递的一个content参数并将其显示出来
props:['content'],
template:'<li>{{content}}</li>'
}
//定义的实例
new Vue({
el: "#root",
components:{
'todo-item':TodoItem
},
data: {
inputValue: "hello",
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
删除功能
- 主要解决主副组件通讯传值的问题
- 实例代码
<div id="root">
<div>
请输入：<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index='index' @delete="handleDelete"></todo-item>
</ul>
</div>
<script>
// var TodoItem = {
// //代表使用该组件时传递的一个content参数并将其显示出来
// props: ['content'],
// template: '<li>{{content}}</li>'
// }
Vue.component('todo-item', {
//接收传过来的参数
props: ['content','index'],
//为小组件添加文本和点击事件
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function () {
//实现删除
this.$emit('delete',this.index)
}
}
})
//定义的实例
new Vue({
el: "#root",
// components: {
// 'todo-item': TodoItem
// },
data: {
inputValue: "hello",
list: []
},
methods: {
handleSubmit: function () {
//提交后向list中添加元素并清空
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
扫一扫
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
