1,Vue常用语法
- vue常用语法之变量的定义
// 1,变量相关
// 变量的提升
var username = "雪雪";
var username ;
console.log(username);
var username = "小雪"; let username;
console.log(username);
let username = "雪人"; // 写一个if 判断的语句,var变量:只有全局作用域和函数作用域
// let 有全局作用域和和函数作用域,块级作用域
if (true) {
var username = "雪雪";
let age = 22;
console.log(username); // 在块级里边var定义的变量是可以访问的
console.log(age) // 在块级标签里边let的定义的变量也是好用的
}
console.log(username); // var的变量可以找得到
console.log(age) // let定义的变量找不到会报错,undefined // let定义的变量不能重复定义
var username = "老郑";
var username = "老孙";
console.log(username); let username = "老郑";
let username = "老孙";
console.log(username);
- Vue常用语法之模板字符串
// 2,模板字符串要用 <--->反引号变量的替换
let oDiv = document.getElementById("app");
oDiv.innerHTML = "<h1>Hello Vue" +
"<h2>i am ok</h2></h1>"; let username1 = "小雪";
let username2 = "雪人";
oDiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h2>Hello ${username2}</h2>`;
- Vue常用语法之数据的解构和赋值
// 3,数据的结构和赋值
// 3.1数据结构的赋值
let ary = [1,2,3];
let[a,b,c] = ary;
console.log(a,b,c);
// 3.2,数据的结构 let obj = {
username : "雪雪 ",
age: 23
};
// 声明一个变量用对象去接
let{username, age} = obj;
console.log(username, age);
// 数据的结构
let a = 1;
let b = 2;
// 在解构的时候
[a, b] = [b, a];
console.log(a,b);
- Vue常用语法之函数的扩展
// 4,默认值参数
function foo(x, y=10) {
let number = y;
return number;
}
ret = foo(1, 2);
console.log(ret);
ret1 = foo(1);
console.log(ret1);
ret3 = foo(1, 0);
console.log(ret3);
- Vue常用语法之箭头函数
// 4.1,箭头函数
// 一个参数
let foo = v => v; // (参数)=> (return)
ret1 = foo(10);
console.log(ret1);
// 0或多个参数
let bar = (x,y) => {return x+y};
ret2 = bar(10, 20);
console.log(ret2) function foo(){
console.log(this)
}
let bar = () => console.log(this);
let obj = {
foo: foo,
bar: bar,
};
let ganggang = {
obj : obj
}; foo(); // 调用foo函数是window
ganggang.obj.foo(); // 调用obj中的foo函数是对象
ganggang.obj.bar(); // 是window let bar = (x,y) => x+y;
ret = bar(1, 2);'
console.log(ret)
- Vue值常用语法之类
// 5,实例化对象的方法
// function Person(){
// this.username = "雪人";
// this.age = 20;
// }
// Person.prototype.showInfo = function () {
// console.log(this.username);
// };
// let xuexue = new Person(); // class Person{
// // 构造函数
// constructor (username, age) {
// this.username = username;
// this.age = age;
// };
// showInfo() {
// console.log(this.username, this.age);
// }
// }
// let xuexue = new Person("xuexue", 18);
// xuexue.showInfo(); // 定义类在ES6中用class,还要用constructor构造函数固定写法
// class Xuexue {
// // 构造函数类似于python中的 __init__方法
// constructor(username, age=29, account=100000) {
// this.username = username;
// this.age = age;
// this.account = account;
// }
// // 显示信息,在这里是类似于一个类的方法
// showInfo(){
// console.log(this.username, this.age, this.account);
// }
// }
// // 继承前边的类用extends
// class Xiaoxue extends Xuexue {
// // 构造子类中独有的属性
// constructor(username){
// // 继承父类中的constructor方法
// super();
// this.username = username;
// // this.age = age;
// // this.account = account
// }
// }
// let xiaoxue = new Xiaoxue("小雪");
// xiaoxue.showInfo()
// 小结:父类中定义了字段,子类就不要定义,定义了也不好使,不管用
- Vue常用语法之对象的单体模式
// 6, 单体模式
// let obj = {
// name: "xueren",
// foo(){ //
// console.log(this.name);
// }
// };
// // obj.foo();
// ret = obj.name;
// console.log(ret)
// 小结:所谓单体是指在对象里定义属性和函数,通过对象名去调用属性和函数
// 6.1,演示
// let obj = {
// name: "雪人",
// f: ()=>{
// console.log(this.name)
// }
// };
// obj.f()
// 当用箭头函数的时候必须按照属性的格式写,且找不到name,找到的是window
- Vue常用语法之框架的应用
// 7,vue框架的作用
// 方法一
// let oDiv = document.getElementById("app");
// oDiv.innerText = "Hello Vue";
// 方法二, Vue框架是数据模板引擎
// 第一步,先导入vue.min,第二步实例化一个Vue对象,前边加关键字new
// new Vue({
// el: "#app", // el表示元素element: 选择器
// data: { // data表示数据greeting表示引用的变量
// greeting: "Hello Vue",
// }
// })
- Vue常用指令之v-text
// 9, Vue常用指令之v-text
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
// new Vue({
// el:"#app",
// data: {
// greeting: "Hello Vue",
// }
// })
// v-text指的是给标签添加内容
- Vue常用指令之v-html
// 10, Vue指令之v-html
// new Vue({
// el:"#app",
// data: {
// greeting: "<h1>Hello Vue</h1>",
// }
// })
// v-html返回的是一个html标签
- Vue常用指令之v-for
// 11, Vue常用指令之v-for
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
// new Vue({
// el: "#app",
// data: {
// xueren: ["我", "刘继成", "myself"],
// friends:[
// {
// name: "老郑",
// age: 28,
// hobby: "王者荣耀",
// },
// {
// name: "老孙",
// age: 23,
// hobby: "tourism",
// },
// {
// name: "老吴",
// age: 33,
// hobby: "吃鸡",
// }
// ]
// }
// })
// 内在机制是for循环,for循环的时候,如果是字典,就可以用点(.)的操作
- Vue常用指令之v-if
// 12, Vue常用指令之v-if
// let vm = new Vue({
// el: "#app",
// data: {
// role: "xuexue",
// }
// })
// 这个没啥,就是个判断
- Vue常用指令之v-show
// 13, Vue常用指令之v-show
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
// let vm = new Vue({
// el:"#app",
// data: {
// // isShow: false, // 只有isShow是true才能展示出来
// isShow: true,
// }
// })
- Vue值常用指令之v-bind
/ 14, Vue常用指令之v-bind,绑定
// let vm = new Vue({
// el: "#app",
// data: {
// jingdong:"https//www.jd.com",
// isActive: "active"
// }
// })
// v-bind绑定的时候要正在a标签的href前边写并加上一个:
- Vue常用指令之v-on
// 15, Vue常用之v-on
// let vm = new Vue({
// el: "#app",
// data: {
// isActive:false,
// },
// methods: {
// changeColor: function(){
// this.isActive = !this.isActive;
// }
// }
// })
// 小结:v-on可以简写成@但是在用v-on:后边很内容
- Vue常用指令之v-mode
/ 16, Vue常用之v-model
// let vm = new Vue({
// el: "#app",
// data: {
// name: "赵丽颖",
// genders: [],
// girlfriends: [],
// }
// })
// 获取用户输入的数据用的v-model要放在script中data一致
- Vue常用指令之计算属性
// 18,Vue常用语法之计算
// let vm = new Vue({
// el: "#app",
// data: {
// python: 88,
// Vue: 100,
// Go: 65,
// },
// // 计算输入框的和在程序启动的时候,加载需要消耗性能
// computed: {
// sumScore: function() {
// console.log(1);
// return this.python + this.Vue + this.Go;
// },
// },
// // watch是监听python输入框的值的变化
// watch: {
// python: function () {
// alert(this.python);
// return this.python + 1;
//
// }
// }
// })
- Vue常用指令之修饰符
// 19,Vue常用语法之指令修饰符
// let vm = new Vue({
// el: "#app",
// data: {
// python: 88,
// Vue: 100,
// Go: 65,
// },
// computed: {
// sumScore: function() {
// console.log(1);
// return this.python + this.Vue + this.Go;
// }
// },
// watch: {
// python: function() {
// return this.python + 1
// }
// }
// })
// 小结:v-model后边可以.trim去空格.number把输入的字符串变成数字类型,lazy当失去焦点在去监听数据的变化
- Vue常用指令之获取DOM元素
/ 20,Vue常用语法之获取DOM元素
// let vm = new Vue({
// el: "#app",
// data: {
// isActive: "active",
// },
// methods: {
// changeColor: function (){
// this.$refs.myRef.className = this.isActive;
// }
// }
// })
// V-on绑定事件点击这个按钮洗护发methods中的changeColor函数,将ref中的样式增加红色的样式
- Vue之常用指令之自定义指令
/ 21,Vue常用指令之自定义指令
Vue.directive("pos", function(el, binding){
console.log("el", el);
console.log("binding", binding);
if (binding.value) {
el.style["position"] = "fixed";
for (let key in binding.modifiers) {
el.style[key] = 0;
}
el.style["right"] = 0;
el.style["bottom"] = 0
}
});
let vm = new Vue({
el: "#app",
data: {
position: true
}
})