第一个vue程序
一，JS常用框架
1， Jquery
2， Vue（★★★）
3， React (Meta)
4， Angular (google)
二、第一个vue程序
1、引入cdn
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
2， Vue对象
// 创建vue对象， 增加他的Vue参数
var vm = new Vue({
// el作用： 指定当前的Vue实例所管理的视图
（html的某个元素），这个视图通常用Id选择器
// 不能挂载在 html， body标签上面
el: "#app",
// data的作用， 指定当前Vue实例的数据对象
data: {
message: "hello vue",
username: "tom",
password: "123456a?"
},
// 指定当前Vue实例中的方法
methods:{}
});
vue常用指令
1，v-text & v-html
2，v-if & v-show
3, v-for
① v-for="(value, index) in items"
括号中 ， 前面是循环的值
括号中 ， 后面是循环的下标（从0开始）
4, v-on:click 绑定事件
5，v-bind:xxx 绑定属性
----代码实例-------
点击查看代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- <h1>aaeea</h1> -->
<!-- 插值表达式，会将绑定的数据实时的显示出来 -->
<!-- <p>{{message}}</p> -->
<!-- <p>{{username}}</p> -->
<!--优先输出v-text的内容（只能输出原本的文本内容） -->
<!-- <h3 v-text="message1">hello</h3> -->
<!--v-html和v-text的区别是它能输出带有html元素的样式内容 -->
<!-- <h3 v-html="message1">word</h3> -->
<!-- v-if="true/false"根据值判断是否显示内容(如果为false则不存在元素) -->
<!-- <h3 v-if="isStudy">好好学习</h3> -->
<!-- <h3 v-if="!isStudy">天天向上</h3> -->
<!-- v-show="true/false"根据值判断是否显示内容(如果为false则设置为隐藏元素) -->
<!-- <h3 v-show="isStudy">好好学习</h3> -->
<!-- <h3 v-show="!isStudy">天天向上</h3> -->
<button @click="doSearch">检索数据</button>
<table v-if="isSearched" align="center" cellspacing="0" border="1">
<tr>
<td>index</td>
<td>empno</td>
<td>ename</td>
<td>job</td>
</tr>
<!-- v-for:将items的值放到tempEmp里面 -->
<!-- <tr v-for="tempEmp in items"> -->
<!-- 括号中 ， 前面是循环的值
括号中 ， 后面是循环的下标（从0开始） -->
<tr v-for="(tempEmp,index) in items">
<td>{{index + 1}}</td>
<td>{{tempEmp.empno}}</td>
<td>{{tempEmp.ename}}</td>
<td>{{tempEmp.job}}</td>
</tr>
</table>
<!-- v-on:click 绑定事件（可简写为@click） -->
<!-- <button v-on:click="sayHello">检索</button> -->
<!-- <button @click="sayHello">检索</button> -->
<!-- v-bind:xxx 绑定属性(可简写为 ：xxx) -->
<!-- 为<h1>标签的title属性绑定uername -->
<!-- <h1 v-bind:title="username">hello vue</h1> -->
<!-- <h1 :title="username">hello vue</h1> -->
<!-- 计步器 -->
<!-- <button @click="add">+</button>{{count}}<button @click="reduce">-</button> -->
<!-- 双向绑定 -->
<p>
username:<input type="text" v-model="username"><br>
password:<input type="password" v-model="password">
</p>
<p>{{username}} + {{password}}</p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//创建vue对象，增加他的vue参数
var vm = new Vue({
//el作用:指定当前的vue实例所管理的视图（html的某个元素）,这个视图通常用Id选择器
//不能挂载在 html,body标签上面
el:"#app",
//data的作用，指定当前vue实例的数据对象
data:{
message:"hello vue",
message1:"<a href='https://www.baidu.com'>baidu</a>",
username:"tom111",
password:"123456a?",
isStudy:false,
isSearched:false,
items:[
{
empno:11,
ename:"tom",
job:"worker"
},
{
empno:12,
ename:"tom2",
job:"worker2"
},
{
empno:13,
ename:"tom3",
job:"worke3r"
},
{
empno:14,
ename:"tom4",
job:"worker4"
},
{
empno:15,
ename:"tom5",
job:"worker5"
},
],
count:0,
},
//指定当前vue实例中的方法
methods:{
sayHello:function(){
alert("你好")
},
doSearch:function(){
this.isSearched = true;
},
add:function(){
this.count++;
},
reduce:function(){
if(this.count>0){
this.count--;
}
}
}
});
</script>
</html>
浙公网安备 33010602011771号