云南网站建设500,惠州百度seo地址,thinkphp2.1网站挂文件,铜陵网站建设价格总结开发中最常用的vue语法#xff0c;以及对特定语法的理解。vue官网 文章目录 一、创建vue项目1、使用开发工具创建2、使用命令行创建3、vue框架结构4、Vue文件结构 二、Vue 常用模板语法1、v-if、v-show2、v-for3、v-on4、v-bind5、v-model 三、组件通信1、父组件给子组件传… 总结开发中最常用的vue语法以及对特定语法的理解。vue官网 文章目录 一、创建vue项目1、使用开发工具创建2、使用命令行创建3、vue框架结构4、Vue文件结构 二、Vue 常用模板语法1、v-if、v-show2、v-for3、v-on4、v-bind5、v-model 三、组件通信1、父组件给子组件传递2、子组件给父组件传递 四、生命周期1、页面生命周期2、组件生命周期3、App生命周期 五、vue数据变量类型梳理1、普通变量2、data3、props变量4、computed计算属性5、watch监听 六、代码复用1、匿名插槽2、具名插槽 七、Vue框架理解 一、创建vue项目
1、使用开发工具创建
很多开发工具新建项目带有vue 2、使用命令行创建
安装vue-cli脚手架
# Vue CLI 2.x版本
npm install -g vue-cli
# Vue CLI 3.x版本
npm install -g vue/cli查看版本
vue -V创建vue项目
# Vue CLI 2.x版本
vue create project-name
# Vue CLI 3.x版本
vue init template-name project-name查看可用模板 参数是必须传递的因为它指定了使用哪个模板来创建新的Vue项目。Vue CLI 2.x版本提供了多个官方模板如webpack、browserify、simple等也支持第三方模板。你可以通过运行以下命令查看所有可用的模板 vue list3、vue框架结构
├── README.md
├── babel.config.js # js相关配置文件
├── node_modules # 项目依赖包
├── package-lock.json
├── package.json # 项目库
├── postcss.config.js # 配置CSS的预处理器
├── public # 页面入口文件
│ ├── favicon.ico
│ └── index.html
└── src # 源代码目录├── App.vue # vue入口├── assets # 资源文件夹├── components # 公共组件└── main.js # 程序入口如java、C的main4、Vue文件结构
在Vue组件中template、script和style标签的加载顺序是固定的依次为
template标签模板用于定义组件【本质为渲染函数】script标签用于定义组件的JavaScript代码style标签CSS样式
templatediv classhellodiv {{test}}/div/div
/templatescript
export default {name: HelloWorld,data () {return {test:阿森的,}},
}
/scriptstyle scoped
h3 {margin: 40px 0 0;
}
/style二、Vue 常用模板语法
1、v-if、v-show
templatediv v-iffalse classhello/div
/templatev-if的实现在 Vue.js 源码中v-if 指令的实现是通过 render 函数来实现的。当解析到 v-if 指令时Vue.js 会根据表达式的值来决定是否需要渲染对应的 DOM 元素。 具体来说Vue.js 会在编译阶段将模板转换为 render 函数然后在运行时执行该函数来生成虚拟 DOM。当执行到 v-if 指令时render 函数会根据表达式的值来决定是否需要渲染对应的虚拟 DOM 节点。 如果表达式的值为真则会渲染对应的虚拟 DOM 节点否则会跳过该节点不进行渲染。这样就能够实现根据条件动态渲染 DOM 元素的功能。 v-show的实现display:“none”; 2、v-for
templatediv classhellodiv v-for(item, index) in [{},{}] v-bind:keyindexasfdaf/div/div
/template3、v-on v-on就是用于绑定事件的 绑定事件单个事件
div v-on:clickonClickItemasfdaf/div绑定多个事件
div v-on{ mousedown: onMouseDown, mouseup: onMouseUp }按下或松开我/div可以简写为
div clickhandleClick点击我/div4、v-bind v-bind用于绑定数据和元素属性 img v-bind:srcimageUrl一般我们省略不写 img :srcimageUrl5、v-model
v-model 是 Vue.js 中用于双向数据绑定的指令它可以将表单元素的值与 Vue 实例中的数据进行绑定实现数据的双向同步。
inputv-modelinputColortypetextclassinputplaceholder颜色值例:#0099FFadjust-positiontruev-model与v-bind区别 1、v-model用于在表单元素和Vue.js实例的数据之间建立双向绑定关系 2、v-bind用于动态地绑定HTML元素的属性值 如果换成v-bind的话如下 仅仅在data刷新是能初始化数据而输入框编写并不能触发data刷新这里会造成不同步。 input :valueinputColor三、组件通信
1、父组件给子组件传递
HelloWorld.vue提供对外的onAlert方法
templatediv classhelloh1asdf/h1/div
/templatescript
export default {name: HelloWorld,methods:{onAlert() {alert(123)},}
};
/script父页面使用ref调用 HelloWorld refhelloWorldRef /this.$refs.helloWorldRef.onAlert();2、子组件给父组件传递
父页面提供回调方法changeSelect“changeSelect”
templatediv idappHelloWorld changeSelectchangeSelect msgWelcome to Your Vue.js App//div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {name: app,components: {HelloWorld},methods:{changeSelect(e){alert(子组件调用父页面e)}}
}
/script子组件调用
templatediv classhelloh1 clickonTapItemasdf/h1/div
/templatescript
export default {name: HelloWorld,methods:{onTapItem() {this.$emit(changeSelect, 123);},}
};
/script四、生命周期
1、页面生命周期 vue的完整生命周期 Vue.js 的生命周期钩子是一组在组件实例化、更新和销毁过程中自动调用的函数用于执行特定的操作。Vue.js 的生命周期钩子可以分为以下三个阶段 创建阶段Creation beforeCreate实例刚被创建数据观测和事件配置之前调用。created实例已经创建完成数据观测和事件配置已完成。beforeMount模板编译/挂载之前调用。mounted实例已经挂载到 DOM 上。 更新阶段Update beforeUpdate数据更新时调用但是界面尚未重新渲染。updated数据更新完成时调用界面已经重新渲染。 销毁阶段Destruction beforeDestroy实例销毁之前调用。destroyed实例销毁之后调用。
以下是 Vue.js 生命周期钩子的执行顺序
beforeCreate - created - beforeMount - mounted - beforeUpdate - updated - beforeDestroy - destroyed2、组件生命周期 vue的阉割版生命周期 以下是更小粒度组件的生命周期钩子
beforeCreate实例刚被创建数据观测和事件配置之前调用。created实例已经创建完成数据观测和事件配置已完成。beforeUpdate数据更新时调用但是界面尚未重新渲染。updated数据更新完成时调用界面已经重新渲染。
注意组件没有 beforeMount 和 mounted 生命周期钩子因为它们不需要挂载到 DOM 上。此外更小粒度的组件也没有销毁阶段的生命周期钩子因为它们不需要手动销毁。
3、App生命周期 手机端小程序框架生命周期非vue生命周期。 onLaunch、onShow和onHide是小程序的生命周期函数它们分别在小程序启动、显示和隐藏时被调用。 onLaunch当小程序初始化完成时会触发onLaunch函数。在这个函数中可以获取小程序的启动参数如场景值、query等。 onShow当小程序启动、或从后台进入前台显示会触发onShow函数。在这个函数中可以获取小程序的启动参数如场景值、query等。 onHide当小程序从前台进入后台会触发onHide函数。在这个函数中可以做一些数据保存等操作。
这些生命周期函数可以在小程序开发中使用以便我们在不同的场景下执行不同的操作。
五、vue数据变量类型梳理
1、普通变量
存在当前vue实例中不与UI层绑定。
声明在script中
在script标签中声明的变量是组件内部的局部变量只能在当前组件内部使用。这些变量可以在组件的各个方法中使用但不能在模板中使用。下图所示hello转test才能在模板中使用
templatediv classhellodiv {{test}}/div/div
/templatescript
// 声明在script中
const helloadfexport default {name: HelloWorld,data () {return {test:hello,}},
}
/script声明在this中
而this变量指向当前组件的实例对象它包含了组件的所有属性和方法。在组件的各个方法中可以通过this变量来访问组件实例对象的属性和方法。同时在模板中也可以使用this变量来访问组件实例对象的属性和方法。
// 使用this操作即可
this.tempData1;2、data
需要操作UI的使用data数据双向绑定 注意必须先在data属性中声明它只有在data属性中声明的变量才会被Vue所监听从而实现数据的响应式更新。 // 初始化
export default {name: AppRow,data() {const tempData 11return {tempData,}},
}// 存
this.setData({tempData:1
})// 取
const tempDatathis.data.tempData;3、props变量
父组件给子组件传值
HelloWorld组件
templatediv classhelloh1{{ msg }}/h1/div
/templatescript
export default {name: HelloWorld,props: {msg: String}
}
/script使用
HelloWorld msgWelcome to Your Vue.js App/4、computed计算属性 等价于redux、mobx中的计算属性。 templatediv classhelloh1{{ information }}/h1/div
/templatescript
export default {name: HelloWorld,data() {return {name: 张三,age: 18};},computed: {information() {const { name, age } this;return name: name ,age: age;}}
};
/script【重要】实现逻辑在计算属性的实现中有两个关键的元素依赖跟踪和缓存。
依赖跟踪计算属性依赖于一个或多个响应式状态例如数据属性或其他计算属性。当这些依赖发生变化时计算属性需要重新计算其值。为了实现这一点计算属性会通过监听它的依赖项来自动追踪变化。一旦某个依赖项发生变化计算属性就会被标记为“不稳定”需要重新计算。这种依赖跟踪的实现方式通常涉及到依赖收集和派发更新。
缓存为了提高性能计算属性通常会缓存其值。这意味着在计算属性的依赖项没有变化时它可以直接返回之前缓存的值而不需要重新计算。只有当依赖项发生变化时计算属性才会重新计算并更新缓存的值。
综上所述计算属性的实现逻辑包括以下步骤
在计算属性的定义中明确指定它所依赖的响应式状态即依赖项。在计算属性被访问时开始依赖收集将正在访问计算属性的代码位置添加到依赖项的依赖列表中。当依赖项的值发生变化时派发更新通知计算属性需要重新计算。计算属性根据其定义的计算逻辑重新计算值并将结果缓存起来。返回计算属性的值给调用方。如果依赖项再次发生变化重复上述步骤。
通过依赖跟踪和缓存机制计算属性能够在依赖项变化时自动更新并在不必要的情况下避免重复计算提高了性能和效率。 1、数据改变是先改变props、data这些其次才是计算属性 2、计算属性会收集依赖的数据并监听。因此我们为了刷新可能会写看似无意义的空表达式。mobx的autoRun也有类似操作。 computed: {information() {this.count;//计算属性监听countconst { name, age } this;return name: name ,age: age;}
},5、watch监听
一般监听props、data数据变化
export default {props: {chartData: {default: () {},type: Object}},watch: {chartData: {deep: true,handler(val) {// todo处理}}}
};六、代码复用
vue的props可以传数据插槽可以传标签语法。而React没这个区分React的props啥都可以传。
1、匿名插槽 相当于React默认的propschild HelloWorld组件接收slot
templatediv classhelloh1 clickonTapItemasdf/h1slot//div
/template页面使用
templatediv idappHelloWorlddiv这是匿名插槽/div/HelloWorld/div
/template2、具名插槽 相当于React的props HelloWorld组件定义了footer、header插槽的位置
templatediv classhelloh1 clickonTapItemasdf/h1slot namefooter/slot nameheader//div
/template页面使用
templatediv idappHelloWorldtemplate v-slot:headerdiv这是具名header插槽/div/templatetemplate v-slot:footerdiv这是具名footer插槽/div/template/HelloWorld/div
/template七、Vue框架理解
https://www.php.cn/faq/499191.html
vue本质是一个类
vue项目中可以包含多个vue实例。在vue项目中一般只有一个VUE实例在main.js中定义其他都是vue组件实例。Vue是由一个个实例构建而成的一个组件就是一个Vue的实例每个组件内部都可以写属性因此每一个组件都是一个Vue的实例。
